Adding a cascading drop down list to a dynamic number of row table Javascript and jQuery

$(document).ready(function() {

  // Denotes total number of rows
  var rowIdx = 0;

  // jQuery button click event to add a row
  $('#addBtn').on('click', function() {
    if (rowIdx < 10) {
      // Adding a row inside the tbody.
      $('#tbody').append(`<tr id="R${++rowIdx}">
            <td class="row-index text-center">
            <p>Step ${rowIdx}</p>
            <select id="parentcat" name="parentcat_List${rowIdx}"  onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
               <option value="cat1">cat1</option>
               <option value="cat2">cat2</option>
               <option value="cat3">cat3</option>
               <option value="cat4">cat4</option>
           </select>


       <div class="sub_category_div" id="sub_category_div">Please select sub category:
                <select name="subcategory${rowIdx}" id="subcategory${rowIdx}">
                <option value="">Please select sub category</option>
               </select>

           <noscript>
               <select name="subcategory${rowIdx}" id="subcategory${rowIdx}" >
                   <option value="">Please select sub category</option>
               </select>
           </noscript>
       </div>       

            </td>
             <td class="text-center">
               <button class="btn btn-danger remove"
                 type="button" style="font-weight: bold; font-size: 12px; border-radius: 20px; font-family: Montserrat alternates;">Remove</button>
               </td>
             </tr>`);
    }
  });



  // jQuery button click event to remove a row.
  $('#tbody').on('click', '.remove', function() {

    // Getting all the rows next to the row
    // containing the clicked button
    var child = $(this).closest('tr').nextAll();

    // Iterating across all the rows 
    // obtained to change the index
    child.each(function() {

      // Getting <tr> id.
      var id = $(this).attr('id');

      // Getting the <p> inside the .row-index class.
      var idx = $(this).children('.row-index').children('p');

      // Gets the row number from <tr> id.
      var dig = parseInt(id.substring(1));

      // Modifying row index.
      idx.html(`Row ${dig - 1}`);

      // Modifying row id.
      $(this).attr('id', `R${dig - 1}`);
    });

    // Removing the current row.
    $(this).closest('tr').remove();

    // Decreasing total number of rows by 1.
    rowIdx--;
  });
});

function dynamicdropdown(listindex) {
  document.getElementById("subcategory${rowIdx}").length = 0;
  switch (listindex) {
    case "cat2":
      document.getElementById("subcategory${rowIdx}").options[0] = new Option("Last Crossover in days", "");
      document.getElementById("subcategory${rowIdx}").options[1] = new Option("1 Day", "1");
      document.getElementById("subcategory${rowIdx}").options[2] = new Option("2 Days", "2");
      document.getElementById("subcategory${rowIdx}").options[3] = new Option("3 Days", "3");
      document.getElementById("subcategory${rowIdx}").options[4] = new Option("4 Days", "4");
      document.getElementById("subcategory${rowIdx}").options[5] = new Option("5 Days", "5");
      document.getElementById("subcategory${rowIdx}").options[6] = new Option("6 Days", "6");
      document.getElementById("subcategory${rowIdx}").options[7] = new Option("7 Days", "7");
      document.getElementById("subcategory${rowIdx}").options[8] = new Option("8 Days", "8");
      document.getElementById("subcategory${rowIdx}").options[9] = new Option("9 Days", "9");
      document.getElementById("subcategory${rowIdx}").options[10] = new Option("10 Days", "10");
      break;

  }
  return true;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="container py-4">
  <div class="table-responsive">
    <form action="" method="post">
      <table class="Summary mb-4">
        <thead>
          <tr>
            <th class="text-center_sum">Name</th>
            <th class="text-center_sum">Result</th>
          </tr>
          <tr>
            <td><input type="text" id="rulename" name="rulename"></td>
            <td>Result
              <select id="Direction" name="Direction_List">
                <option value="Increase">Increase</option>
                <option value="Decrease">Decrease</option>
              </select>
              Score
              <select id="Score" name="Score_list">
                <option value="0.25">0.25</option>
                <option value="0.50">0.50</option>
                <option value="0.75">0.75</option>
                <option value="1.00">1.00</option>
              </select>
            </td>
          </tr>
        </thead>
      </table>

      <table class="table table-bordered mb-4">
        <thead>
          <tr>
            <th class="text-center">Condition</th>
            <th class="text-center">Remove Rule Step</th>
          </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
      </table>
      <button class="btn btn-md btn-primary" id="addBtn" type="button" style="font-weight: bold; font-size: 12px; border-radius: 20px; font-family: Montserrat alternates;">Add Step</button>

      <input type="submit" name="Rule_Config-submit" value="Update Rule" style="font-weight: bold; font-size: 12px; border-radius: 20px; font-family: Montserrat alternates;" />
    </form>
  </div>
</div>