How can I create unique IDs for each input field after click on "Add Row"?

Question

I am having a dynamic table which is adding the rows on click "ADD ROW" There are 9 input fields in a row.

The problem is all rows of the input boxes has same ID name and this will create problem while submitting the form.

I want to increment the ID name of input fields of a row

$(document).ready(function(){
  $("#add").on('click', function(e) {
      var i = +$('#table tbody tr:last td:first').text();
      
      var clonedRow = $('#table tbody tr:last').clone()
              .find('td:first').text(i+1).closest('tr').attr('id', 'addr' + i)       
              .find('input').val('').closest('tr');
    
              

      $('#table tbody').append(clonedRow);
  });

  $('#table').on('click', '.btn', function(e) {
      if ($(this).closest('tr').siblings().length > 0) {
          $(this).closest('tr').remove();
         
      }
  });


});

with the above code I can only add row but the id names are same for each input field of the added rows