JSFiddle - React, Tailwind, and code Playground

by bthorn

HTML

<table>
    <tr>
        <td style="width:5px;">
            <input type="hidden" name="GridView1:_ctl2:hndTxtId" id="GridView1__ctl2_hndTxtId" value="3601">
        </td>
        <td style="width:50px;">	<span id="GridView1__ctl2_lblVehicle0">413</span>

        </td>
        <td style="width:150px;"> <span id="GridView1__ctl2_lblName2">LONG</span>

        </td>
        <td style="width:100px;"> <span id="GridView1__ctl2_lblEquip2">BKT/TDR/M</span>

        </td>
        <td style="width:150px;">	<span id="GridView1__ctl2_lblScheduleb">0600-1430</span>

        </td>
        <td style="width:50px;"> <span id="GridView1__ctl2_lblScheduleOrig2">8</span>

        </td>
        <td style="width:150px;"> <span id="GridView1__ctl2_lblTimeOn"></span>

        </td>
        <td style="width:150px;"> <span id="GridView1__ctl2_lblTimeOff"></span>

        </td>
        <td>
            <input id="GridView1__ctl2_chkOut" type="checkbox" name="GridView1:_ctl2:chkOut" checked="checked" class="out">
        </td>
        <td>
            <input id="GridView1__ctl2_chkYes2" type="checkbox" name="GridView1:_ctl2:chkYes2" checked="checked" class="yesno">
        </td>
        <td>
            <input id="GridView1__ctl2_chkNo2" type="checkbox" name="GridView1:_ctl2:chkNo2" class="yesno">
        </td>
        <td style="width:5px;">
            <input type="submit" name="GridView1:_ctl2:AddButton0" value="On" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl2_AddButton0" class="btn-blue">
        </td>
        <td style="width:150px;">
            <input name="GridView1:_ctl2:txtStormTimeOn" type="text" value="9-15-2015 12:00" id="GridView1__ctl2_txtStormTimeOn">
        </td>
        <td style="width:5px;">
            <input type="submit" name="GridView1:_ctl2:OffButton" value="Off" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl2_OffButton" class="btn-blue">
        </td>
        <td...

JavaScript

$('.out').on('change', function () {
    $(this).closest('tr').find('.out').not(this).prop('checked', false);
    //console.log(this.id);
    //var hiddenID = $(this).closest('tr').find('input[type=hidden]').prop('id');
    var hdn = $(this).closest('tr').find('input[type="hidden"]').val();
    //var ids = ['GridView1__ctl2_chkOut', 'GridView1__ctl2_chkYes2', 'GridView1__ctl2_chkNo2'];
    //for (var i = 0; i < ids.length; i++) {
    //    var splat = ids[i].split('_');
    //alert('d');
    //console.log(splat[splat.length - 1]);
    //}
    //var arr = "GridView1__ctl2_chkOut".split("_");
    //var arr = this.id.split("_");
    //var x = arr[arr.length - 1]; // gives chkOut
    //console.log('x= ' + x);
    var codes = newCodes(this.id, hdn);
    var chkVal = codes.chk;
    var hdnVal = codes.hdn;
    var chkEnd = codes.chkEnd;
    console.log('chkVal= ' + chkVal + ' hdnVal= ' + hdnVal + ' chkEnd = ' + chkEnd);
    //console.log(hdn);
	var ret = callProcessor(chkEnd, chkVal, hdnVal);
    console.log(ret);
    
});
$('.yesno').on('change', function () {
    $(this).closest('tr').find('.yesno').not(this).prop('checked', false);
    //console.log(this.id);
    //var hiddenID = $(this).closest('tr').find('input[type=hidden]').prop('id');
    var hdn = $(this).closest('tr').find('input[type="hidden"]').val();
    //console.log(hdn);
    var codes = newCodes(this.id, hdn);
    var chkVal = codes.chk;
    var hdnVal = codes.hdn;
    var chkEnd = codes.chkEnd;
    console.log('chkVal= ' + chkVal + ' hdnVal= ' + hdnVal + ' chkEnd = ' + chkEnd);

    // IF chkYes2 is checked then chkNo2 must be sent back to the database as well

    //.ajax call  send   chkEnd value  if the chkEnd = chkYes and value is 0  then need to also send in chkNo2 with opposite value of 1  

 var ret = callProcessor(chkEnd, chkVal, hdnVal);
 console.log(ret);

});

var callProcessor = function(checkboxName, checkboxValue, Id) {

    var apiCall = "";
    //var checkBoxSend = "";
    //var...