Javascript append table row is not working

Question

I am at this for hours to make this work. But I cant find what is going wrong here, the new row is not added on the button click and the console shows no errors..

The Goal is to have a form for the user to add an extra table row with input fields to the form or delete one if they add to much, so they can put in more rows of data at once. I am new to Javascript / Jquery, all help is welcome !

The form:

<button type="button" name="addrow" id="addrow" class="example_e">Add New Row</button>

<form class="form-horizontal" action="<?php htmlspecialchars($filterpage); ?>" method="post">
   <table class="testtable">
        <thead>
            <tr>
        <th style="width:0px !important;"></th>
        <th>Account Name</th>
        <th>Emailadress</th>
        <th>Password</th>
        <th>Paying</th>

        <th></th>
         </tr>
        </thead>
    <tbody>
      <tr>
       <td><input type="hidden" style="width:2px !important;" class="form-control sl" name="slno[]" id="slno" value="1" readonly=""></td>
        
        <td><input type="text" style="width:190px !important;font-weight: normal !important;"
         class="form-control" name="name[]" id="acc_name" placeholder="Enter Account Name" required minlength="3" maxlength="150"></td>
         
         <td><input type="email" style="width:210px !important;font-weight: normal !important;"
         class="form-control" name="accmail[]" id="acc_email" placeholder="mail@mail.nl" required minlength="3" maxlength="150"></td>
         
         <td><input type="text" style="width:130px !important;font-weight: normal !important;"
         class="form-control" name="password[]" id="acc_pass" placeholder="Enter Password" required minlength="3" maxlength="50"></td>
        
        
        <td>
        <label class="switch">
        <input type="checkbox" name="betaald[]" id="acc_betaald"  value="Yes" checked/>
        <div class="slider round">
        <span class="on">Yes</span>
        <span class="off">No</span>
        </div>
        </label></td>
        

        <td></td> </tr></tbody></table>
      
  <br/>

  <button type="submit" name="submitnewacc" class="example_e">Add account(s) to database!</button>
</form>

The script:

<script type="text/javascript">
const tableRow = (i) => {return `
    <tr>
      <td>
        <input type="hidden" class="form-control sl" style="width:2px !important;" name="slno[]" value="${ i }" readonly="">
      </td>
      <td>
        <input type="text" style="width:190px !important;font-weight: normal !important;" 
        class="form-control" name="name[]" id="acc_name${ i }" placeholder="Enter Account Name" 
        required minlength="3" maxlength="150" >
      </td>
      <td><input type="email" style="width:210px !important;font-weight: normal !important;"
         class="form-control" name="accmail[]" id="acc_email${ i }" placeholder="mail@mail.nl" required minlength="3" 
         maxlength="350" ></td>
         
         <td><input type="text" style="width:130px !important;font-weight: normal !important;"
         class="form-control" name="password[]" id="acc_pass${ i }" placeholder="Enter Password" required minlength="3" maxlength="150"></td>
         
        <td>
        <label class="switch">
        <input type="checkbox" name="betaald[]" id="acc_betaald${ i }"  value="Yes" checked/>
        <div class="slider round">
        <span class="on">Yes</span>
        <span class="off">No</span></label></td>
        
       <td><input type="button" class="btnRemove example_b" value="Delete"/></td></tr>
  `
}

$('#addrow').click(function() {
  var length = $('.sl').length;
  var i = parseInt(length) + parseInt(1);
  var newrow = $('.tbody').append(tableRow(i));
  
});

// Removing event here
$('body').on('click', '.btnRemove', function() {
  $(this).closest('tr').parent().remove()
});
    </script>

Answer 1

The $() function in query is similar to the document.querySelector() function in plain JS.

On the line var newrow = $('.tbody').append(tableRow(i)); you put a . before the "tbody" selector. This returns elements which have the class name of "tbody", not by its tag name. In order to get the elements by tag name just remove the leading .

So change that line to var newrow = $('tbody').append(tableRow(i));