Adding row to table using jQuery append() doesn't work

Question

Because my page contains multiple tables using the template, after recuperating the template, I need to change the id of the table to avoid the mess when I fill each table. My issue is after changing the table id when I try to fill the table with jQuery append(), the table always stays empty. But if I don't change the id, it works. The table is filled well.

Here is HTML

<template id="ticket-card">
   <div id="ticket-line" class="ticketCard">
       <div class="ticketTitle ticket-container"></div>
       <div class="ticketUser ticket-container"></div>
       <div class="tickeDate ticket-container"></div>
       <div class="ticketMessage ticket-container"></div>
       <div class="ticketButton buttonsContainer">
       <div class="pre-toggle">
           <label class="toggle">
              <input type="checkbox" id="is-resolved">
              <span class="labels" data-on="Resolu" data-off="En cours"></span>
           </label>
       </div>
       <button id="reply-msg" class="buttonReply"><img src="../../rsc/reply.png" alt="Répondre" class="replyIcon"></button>
       <button id="delete-msg" class="buttonDelete"><img src="../../rsc/trash.png" alt="Supprimer" class="trashSign"/></button>
       </div>
   </div>
   <div class="containerScrollable response" id="containerResponse">
       <table>
           <tbody id="Tableresponse">
              <tr></tr>
           </tbody>
       </table>
   </div>
</template>

The code with jQuery

let UserElement = <HTMLElement>templateElement.content.cloneNode(true);
let idx;
for (idx = 0; idx < 4; idx++) {
    UserElement.querySelector("#Tableresponse").setAttribute("id", "Tableresponse" + idx);

    $('#Tableresponse' + idx).children().detach();
    $('#Tableresponse' + idx).append("<tr><td>Hello</td></tr><tr><td>World!</td></tr>");