I am having problems with <script> tag not working when it is clearly there in the html body in the browser console

Question

I have a jsp file which has an "iframe" tag where my data is shown when user searches for a field. When user clicks search, my servlet gets userdata from the database and create html page using StringBuilder, and convert everything to string at the end and send it to the iframe tag to be displayed. It all works fine but my function inside the script tag is not being picked up by the browser when it is clearly there. I have tried putting my script function in the head and the body tag but it didn't work. Even I put a simple script function to print error it still gives me the same error. Here is how I am calling the function

htmlContent.append(String.format("<td><button type='button' onclick=\"sendRequest('%s')\">%s</button></td>",

Here is my script tag

htmlContent.append("<script>");
htmlContent.append("function sendRequest(RecorderID) {");
htmlContent.append("  var url = updateRecorderInfoServlet?RecorderID=' + RecorderID        
htmlContent.append("  console.log('Request URL:', url);");
htmlContent.append("     window.location.href = url;");
htmlContent.append("}");
htmlContent.append("</script>");

This is my jsp file

function submitForm() {
  // Get the form data
  var formData = new FormData(document.getElementById('displayForm'));

 // Send a POST request using JavaScript Fetch API
 fetch('getRecorderInfoServlet', {
                method: 'POST',
                headers: { 'Content-Type': 'text/plain' },
                body: formData.get('Recorder_ID')
            })
  .then(response => response.text())
  .then(data => {
      // Update the iframe content
      document.getElementById('resultFrame').contentWindow.document.body.innerHTML = data;
  })
 .catch(error => console.error('Error:', error));
}

...

<header>    
  <a href="landingPageServlet" title="Home"><span>&#127968;</span></a>
  <h1>Search by User ID</h1>
</header>

...
<form id = "displayForm" onsubmit="event.preventDefault(); submitForm();" >
  <label for="recorderId">Enter Recorder ID:</label>
  <input type="text" id="recorderId" name="Recorder_ID" required/>
  <br>
  <input type="submit" value="Search">
</form>
<iframe id="resultFrame" name="resultFrame" width="100%" height="500px"></iframe>


</body>

I am expecting to transfer the recorder id to to another servlet when user clicks on the recorder id in the table. I could've used dispatcher too but that doesn't allow me to use onClick. I want to transfer the user id only when user clicks on the tag. Manually putting the function in the browser console works perfectly fine.