JSFiddle - React, Tailwind, and code Playground

by SchmalzyB

HTML

<table id="tblCustomerAttendees">
  <thead>
    <tr>
      <th>Name</th>
      <th>Title</th>
      <th>Nationality</th>
      <th></th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th><input type="text" id="txtCustomerName" /></th>
      <th><input type="text" id="txtCustomerTitle" /></th>
      <th><input type="text" id="txtCustomerNationality" /></th>
      <th><button id="btnInsert" class="btn btn-success">Add</button></th>
    </tr>
  </tfoot>
  <tbody >

  </tbody>
</table>
<!--Hidded field is populated via JavaSctipt and container information as a JSON object -->
<input id="hdCustomerList" type="hidden" value='[{"name":"Brandon Schmalz","title":"Programmer","nationality":"USA"}]' />

JavaScript

"use strict";

//GLOBAL VARIABLE - Store Customer Attendees as JSON object
var jsonObj = [];

$(function () {
    
    //INSERT NEW ITEM - Append a new item to table and update JSON object and Hidden Field
    $('#btnInsert').click(function (e) {
        e.preventDefault();
        
        //Get Values
        var name = $('#txtCustomerName').val();
        var title = $('#txtCustomerTitle').val();
        var nationality = $('#txtCustomerNationality').val();
        
        //Add row to table
        $('#tblCustomerAttendees > tbody').append('<tr><td class="data-name">'
            + name + '</td><td class="data-title">'
            + title + '</td><td class="data-nationality">'
            + nationality + '</td><td><button class="btnDeleteRow">Delete</button></td></tr>');

        //Build json item
        var item = {
            'name': name,
            'title': title,
            'nationality': nationality
        }

        //Update JSON object and hidden input
        jsonObj.push(item);
        $('#hdCustomerList').val(JSON.stringify(jsonObj));
        
        //Clear inputs
        $('#txtCustomerName').val("");
        $('#txtCustomerTitle').val("");
        $('#txtCustomerNationality').val("");
        
        //FOR DEV ONLY - log contents of hidden input to console
        console.log($('#hdCustomerList').val());
    });

    //DELETE ITEM - Delete row from table rebuild JSON object and Hidden Field
    $('#tblCustomerAttendees').on('click', '.btnDeleteRow', function (e) {
        e.preventDefault();

        //Delete row from table
        $(this).parent('td').parent('tr').remove();

        //build new JSON object from table
        var newJsonObj = [];
        $('#tblCustomerAttendees > tbody > tr').each(function () {
            var $this = $(this);

            var item = {
                'name': $this.find('.data-name').html(),
                'title': $this.find('.data-title').html(),
                'nationality':...