Renaming ID of all child elements after dynamically deleting line in table

I created a form in Google Apps Script, to send data to a sheet, but I wanted a way to dynamically add rows by clicking a button. I found this article (https://www.geeksforgeeks.org/how-to-dynamically-add-remove-table-rows-using-jquery/) that uses jquery that works well great, even shows how to delete a line, whilst also renaming the <tr> tag id to the correct number as well as the text content of the first <td> tag.

However, I added an autocomplete input using materialize, and thought I could use the same method to change the <input> ID when deleting a row, but, seem to be failing miserably.

To see what I’m talking about, I’d invite you to run the code snippit, and add a few rows. If you delete any of the rows (apart from the last one), then all the Row numbers go down by one, the <tr> tag ids go down by one, but the <input> tag ids don’t.

I apologize if my query isn’t clear, and would be happy to try and explain more, if needed.

Here is all the code to recreate the project in a “normal” code editor :

JS in first snippit, html in second

let rowIdx = 1;

//This list would be generated from a google sheet on page load for the autocomplete input
let listRecettes = {
  "Banana": null,
  "Orange": null,
  "Mango": null,
}

//ON LOAD  
document.addEventListener('DOMContentLoaded', function() {

  var elems = document.querySelectorAll('.autocomplete');
  var instances = M.Autocomplete.init(elems);

  // Load words into autocomplete
  populateWordsRecettes();
});


//Autocomplete initialize
function populateWordsRecettes() {
  var autocomplete = document.getElementById("recettes1");
  var instances = M.Autocomplete.init(autocomplete, {
    data: listRecettes
  });
}

//autocomplete initialize for added rows
function newLineAutocomplete() {
  var autocomplete = document.getElementById(`recettes${rowIdx}`);
  var instances = M.Autocomplete.init(autocomplete, {
    data: listRecettes
  });
  console.log(`Row ${rowIdx} initialized`);
}

document.getElementById('btnAjouterLigne').addEventListener('click', addLine);

function addLine() {
  // jQuery button click event to add a row.
  // Adding a row inside the tbody.
  $('#tableBodyCasse').append(`<tr id="R${++rowIdx}">
          <td class = "row-index">Row ${rowIdx}</td>
          <td><div class = "input-field"><input type="text" id="recettes${rowIdx}" class="autocomplete"></div></td>
          <td>Lorum Ipsum</td>
          <td>Lorum Ipsum</td>
          <td>Lorum Ipsum</td>
          <td><button class="btn waves-effect red darken-4 waves-light btnSupprimerLigne">Delete</button></td>
           </tr>`);

  //Initialize the autocomplete for new row
  newLineAutocomplete();
}


//delete line
$('#tableBodyCasse').on('click', '.btnSupprimerLigne', function() {

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

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

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

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

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

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

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



  //MY PROBLEM STARTS HERE
  let childInput = $(this).find('input').nextAll();
  childInput.each(function() {
    let idInput = $(this).attr('id');
    let digInput = parseInt(idInput.substring(9));
    console.log(digInput);
    $(this).attr('id', `recettes${digInput - 1}`);
  });

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

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

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
  </script>

</head>

<body>

  <div class="container">
    <!-- CONTAINER START -->
    <table class="striped">
      <thead>
        <tr>
          <th>Row num</th>
          <th>Product</th>
          <th>Type</th>
          <th>Qty</th>
          <th>Total</th>
          <th>Delete line</th>
        </tr>
      </thead>

      <tbody id="tableBodyCasse">
        <tr id="R1">
          <td class="row-index">Row 1</td>
          <td>
            <div class="input-field"><input type="text" id="recettes1" class="autocomplete"></div>
          </td>
          <td>unknown</td>
          <td>2</td>
          <td>5,4</td>
          <td><button class="btn waves-effect red darken-4 waves-light btnSupprimerLigne">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>

    <button class="btn waves-effect waves-light" id="btnAjouterLigne">Add line
    <i class="material-icons left">add_circle_outline</i>
  </button>


  </div>
  <!--CONTAINER END -->






  <?!= include("page-casse-js"); ?>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>

</html>