JSFiddle - React, Tailwind, and code Playground

by Simon Price

HTML

<div class="panel-body">
    <table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
        <thead>
        <tr>
            <th>Postcode</th>
            <th>Bathroom Fitter</th>
            <th>Kitchen Fitter</th>
            <th>Electrician</th>
        </tr>
        </thead>
        <tbody>
        <tr class="odd gradeX">
            <td class="postcode">PO21 5EJ</td>
            <td><input type="checkbox" class="select-location" name="name1" checked /></td>
            <td><input type="checkbox" class="select-location" name="name1" checked /></td>
            <td><input type="checkbox" class="select-location" name="name1" checked /></td>
        </tr>
        <tr class="odd gradeX">
            <td class="postcode">PO16 7TD</td>
            <td><input type="checkbox" class="select-location"  name="name2" /></td>
            <td><input type="checkbox" class="select-location"  name="name2" /></td>
            <td><input type="checkbox" class="select-location"  name="name2" /></td>
        </tr>
        <tr class="odd gradeX">
            <td class="postcode">PE2 6XZ</td>
            <td><input type="checkbox" class="select-location"  name="name4" /></td>
            <td><input type="checkbox" class="select-location"  name="name4" /></td>
            <td><input type="checkbox" class="select-location"  name="name4" /></td>
        </tr>
        <tr class="odd gradeX">
            <td class="postcode">PE2 8UH</td>
            <td><input type="checkbox" class="select-location"  name="name5" /></td>
            <td><input type="checkbox" class="select-location"  name="name5" /></td>
            <td><input type="checkbox" class="select-location"  name="name5" /></td>
        </tr>

        </tbody>
    </table>
</div>
<label for="confirm-selection">I confirm that ...</label><input type="checkbox" checked id="confirm-selection" class="confirm-selection" name="name5" />
<button id="save" onclick="save">Save</button>
<div...

JavaScript

var oldChkBxs;
var arr = new Array()

function detect(){
  var chkBxs=[];
  $('.select-location').each(function(){   
    if(this.checked){
      chkBxs.push(true);
    }else{
      chkBxs.push(false);
    }
  });
  return chkBxs;
}

function showChanges(arr){
	var returnedData = $.grep(arr, function (element, index) {return element.status !== "original state"});
  
  var numberOfChanges = returnedData.length
  
  var visibility = $("#pcChanges").is(":visible") ? "" : "hidden"
  var spanTxt = $("#pcChanges").is(":visible") ? "Hide detail" : "Show detail"
  var html = "<b> Total Changes : " + numberOfChanges + "</b> <span style='cursor: pointer' id='showhidedetail'>" + spanTxt + "</span>"
  
   
  html += "<ul id='pcChanges' " + visibility + ">"
  $.each(returnedData, function(idx, element){
  	html += "<li> Postcode: " + element.postcode + " for " + element.class + " has been " + element.status +"</li>"
  })
  html += "</ul>";
  $("#result").html(html)
  $("#showhidedetail").bind('click', function(){
  	showDetail();
  })
}

function showDetail(){
	$("#pcChanges").slideToggle()
  console.log($("#showhidedetail"))  
  console.log($("#showhidedetail")[0].innerText)
  if($("#showhidedetail")[0].innerText === "Show detail"){
  $("#showhidedetail")[0].innerText = "Hide detail"
  }else{
  $("#showhidedetail")[0].innerText = "Show detail"
  }

  
}

oldChkBxs=detect();
$('.select-location').on('click',function(){
  var newChk=detect();
  if(oldChkBxs.toString()===newChk.toString()){
   $(".confirm-selection").click(); 
    $("#save").removeAttr('disabled');
  }else{
  
  	$(".confirm-selection").removeAttr('checked'); 
    $("#save").attr('disabled','disabled');
  }  
});

$('.select-location').change(function() {
    var $cell = $(this).closest("td");
    var postcode = $(this).closest("tr").find(".postcode");
    var cellIndex = $cell.index();
    var headerVal = $cell.closest("table").find("thead > tr > th").eq(cellIndex).html();

    var status =...