JSFiddle - React, Tailwind, and code Playground

by Fogest

HTML

<div class="dataTables_wrapper" id="servicesTable_wrapper">
  <div class="fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix">
    <div class="dataTables_length" id="servicesTable_length">
      Show <select name="servicesTable_length" size="1">
        <option value="10">
          10
        </option>

        <option selected="selected" value="25">
          25
        </option>

        <option value="50">
          50
        </option>

        <option value="100">
          100
        </option>
      </select> entries
    </div>

    <div class="dataTables_filter" id="servicesTable_filter">
      Filter: <input type="text">
    </div>
  </div>

  <table border="0" cellpadding="5" id="servicesTable" style="align:center;" width="100%">
    <thead>
      <tr>
        <th class="ui-state-default" style="width: 1014px;">
          <div class="DataTables_sort_wrapper">
            Services<span class="css_right ui-icon ui-icon-triangle-1-s"></span>
          </div>
        </th>

        <th class="ui-state-default" style="width: 301px;">
          <div class="DataTables_sort_wrapper">
            Monitor<span class="css_right ui-icon ui-icon-carat-2-n-s"></span>
          </div>
        </th>

        <th class="ui-state-default" style="width: 465px;">
          <div class="DataTables_sort_wrapper">
            Add/Remove<span class="css_right ui-icon ui-icon-carat-2-n-s"></span>
          </div>
        </th>
      </tr>
    </thead>

    <tfoot>
      <tr>
        <th class=" ui-state-default">Services</th>

        <th class=" ui-state-default">Monitor</th>

        <th class=" ui-state-default">Add/Remove</th>
      </tr>
    </tfoot>

    <tbody>
      <tr class="odd" id="s2">
        <td class=" sorting_1"><label class="service existing" style="text-decoration: underline; cursor: help;">Web Server</label></td>

        <td><input checked="true" class="monitor" id="m2" name="monitored" type="checkbox"></td>

       ...

JavaScript

var serviceTracker = {};
$('.add-remove-new').live('click', function() {
  if ($(this).val() == 'Remove') {
    $(this).parent().parent().remove();
    if ($('.service', $(this).parent().parent()).hasClass('existing')) {
      serviceTracker[$('.service', $(this).parent().parent()).text()] = {};
      serviceTracker[$('.service', $(this).parent().parent()).text()].action = 'Delete';
      serviceTracker[$('.service', $(this).parent().parent()).text()].active = 0;
    }
    else {
      serviceTracker[$('.service', $(this).parent().parent()).val()] = {};
      serviceTracker[$('.service', $(this).parent().parent()).val()].action = 'Delete';
      serviceTracker[$('.service', $(this).parent().parent()).val()].active = 0;
    }
  }
  else if ($(this).val() == 'Add') {
    $('tr.newService:last').clone().insertAfter($('tr.newService:last'));
    $(this).val('Remove');
    serviceTracker[$('.service', $(this).parent().parent()).val()] = {};
    serviceTracker[$('.service', $(this).parent().parent()).val()].action = 'Add';
    serviceTracker[$('.service', $(this).parent().parent()).val()].active = 1;
  }
  console.log(serviceTracker);
});
$('.monitor').live('change', function() {
  if (typeof(serviceTracker[$('.service', $(this).parent().parent()).val()]) === 'undefined' && typeof(serviceTracker[$('.service', $(this).parent().parent()).text()]) === 'undefined') {
    if (typeof(serviceTracker[$('.service', $(this).parent().parent()).val()]) === 'undefined') serviceTracker[$('.service', $(this).parent().parent()).val()] = {};
    else serviceTracker[$('.service', $(this).parent().parent()).text()] = {};
  }
  if ($(this).is(':checked')) {
    if (serviceTracker[$('.service', $(this).parent().parent()).val()] in serviceTracker) {
      serviceTracker[$('.service', $(this).parent().parent()).val()].active = 1;
    }
    else if (serviceTracker[$('.service', $(this).parent().parent()).text()] in serviceTracker) {
      serviceTracker[$('.service',...