Use link updating script that is little more straightforward

[yasonk]

Instead of

// Change each link to reflect settings
        document.querySelectorAll(".study-guide-link").forEach(link => {
            let subject = link.getAttribute("data-subject");
            let topic = link.getAttribute("data-topic");
            let newUrl = `{{ url_for('study_guide') }}?subject=${encodeURIComponent(subject)}&topic=${encodeURIComponent(topic)}&username=${encodeURIComponent(username)}&teaching_style=${encodeURIComponent(teachingStyle)}`;
            link.href = newUrl;
        });

<input type="text" id="queryField" placeholder="Enter query param value" />
<a href="https://example.com/page2" onclick="handleLinkClick(event)" class="link">Page 2</a>

<script>
  function handleLinkClick(event) {
    event.preventDefault(); // Stop default navigation

    const input = document.getElementById('queryField');
    const value = input.value.trim();
    const url = new URL(event.currentTarget.href);

    if (value) {
      url.searchParams.set('q', value); // Replace 'q' with your param name
    }

    window.location.href = url.toString(); // Navigate to updated link
  }
</script>