How to update the entire div after deleting each row?

Question

I wrote a simple table, and in each row I'll update the div tag.

As you can see, each row contains two parts that are separated by :, and each part in my array separated by |.

so the output is something like this :

|3:Apple|5:Orange|1:Lemon

I'm very rookie in JS,So if you answer these two questions, I will be grateful.

1. How can I update the entire div after deleting each row?

2. According to the code I wrote(Just JS), do you suggest a shorter and cleaner way to update the div? I feel that the code I wrote is very spaghetti.

$('.add-row').click(function() {
  row = "<tr class='prod-row'><td class='product_kind'><input type='number' name='prodKind' placeholder='number' /></td><td class='product_kind'><input dir='rtl' type='text' name='prodKind' placeholder='item' /></td><td><span class='del-row font-icon-minus-sign'>del</span></td></tr>";
  $(this).closest('table').append(row);
});
$('table').on('click', 'td span.del-row', function(e) {
  $(this).closest('tr').remove();
});
$(document).on('change', 'input[name="prodKind"]', function() {
  mainArr = [];
  var mainTable = $(this).closest('table');
  var tr = mainTable.find('tr');
  tr.each(function() {
    tmpArr = [];
    $(this).find('.product_kind').each(function() {
      var values = $(this).find('input').val();
      tmpArr.push(values);
    });
    mainArr.push(tmpArr.join(":"));
  });
  $(this).parent().parent().parent().parent().closest('td').children('.kind-out').html(mainArr.join("|"));
  $(this).parent().parent().parent().parent().closest('td').children('.kind-out').trigger('blur');

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<tr>
  <td>
<table>
  <tr>
<td>
  <table class='table tablemain' border=1>
    <tr>
      <td>number</td>
      <td>item</td>
      <td><span class="add-row font-icon-plus-sign">add</span></td>
    </tr>
  </table>
  <div class='kind-out'></div>
</td>
  </tr>
</table>
  </td>
</tr>
</table>

Answer 1

I have added a render function which basically gets called from the delete button click and the input change

$('.add-row').click(function() {
  row = "<tr class='prod-row'><td class='product_kind'><input type='number' name='prodKind' placeholder='number' /></td><td class='product_kind'><input dir='rtl' type='text' name='prodKind' placeholder='item' /></td><td><span class='del-row font-icon-minus-sign'>del</span></td></tr>";
  $(this).closest('table').append(row);
});
$('table').on('click', 'td span.del-row', function(e) {
  $(this).closest('tr').remove();
  render();
});

//Render function called from onchange as well as delete click
function render(){
 mainArr = [];
  var mainTable = $('.tablemain');
  var tr = mainTable.find('tr');
  $('.kind-out').html("");
  tr.each(function() {
    tmpArr = [];
    $(this).find('.product_kind').each(function() {
      var values = $(this).find('input').val();
      if(values.trim() != ''){
      tmpArr.push(values);
      }
    });
    if(tmpArr.length > 0)
    mainArr.push(tmpArr.join(":"));
  });
  $('.kind-out').html(mainArr.join("|"));
  $('.kind-out').trigger('blur');
}

$(document).on('change', 'input[name="prodKind"]', render);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<tr>
  <td>
<table>
  <tr>
<td>
  <table class='table tablemain' border=1>
    <tr>
      <td>number</td>
      <td>item</td>
      <td><span class="add-row font-icon-plus-sign">add</span></td>
    </tr>
  </table>
  <div class='kind-out'></div>
</td>
  </tr>
</table>
  </td>
</tr>
</table>