title: How to update the entire div after deleting each row?
body: <p>I wrote a simple table, and in each row I'll update the <code>div</code> tag.</p>
  <p>As you can see, each row contains two parts that are separated by <code>:</code>, and each part in my array separated by <code>|</code>.</p>
  <p>so the output is something like this :</p>
  <p><code>|3:Apple|5:Orange|1:Lemon</code></p>
  <p>I'm very rookie in JS,So if you answer these two questions, I will be grateful.</p>
  <ol>
  <li><p>How can I update the entire div after deleting each row?</p>
  </li>
  <li><p>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.</p>
  </li>
  </ol>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.add-row').click(function() {
    row = "&lt;tr class='prod-row'&gt;&lt;td class='product_kind'&gt;&lt;input type='number' name='prodKind' placeholder='number' /&gt;&lt;/td&gt;&lt;td class='product_kind'&gt;&lt;input dir='rtl' type='text' name='prodKind' placeholder='item' /&gt;&lt;/td&gt;&lt;td&gt;&lt;span class='del-row font-icon-minus-sign'&gt;del&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;";
    $(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');
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;
  &lt;table&gt;
    &lt;tr&gt;
  &lt;td&gt;
    &lt;table class='table tablemain' border=1&gt;
      &lt;tr&gt;
        &lt;td&gt;number&lt;/td&gt;
        &lt;td&gt;item&lt;/td&gt;
        &lt;td&gt;&lt;span class="add-row font-icon-plus-sign"&gt;add&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;div class='kind-out'&gt;&lt;/div&gt;
  &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>