JSFiddle - React, Tailwind, and code Playground

by sushanth009

HTML

<div>
    <div class="divMain">
        <div>
            <table cellspacing="0" cellpadding="4" id="ctl00_PlaceHolderMain_myGrid" class="table">
                <tr class="rowHead">
                    <th scope="col">&nbsp;</th>
                    <th scope="col">JobCode</th>
                    <th scope="col">JobName</th>
                    <th scope="col">JobPartner</th>
                    <th scope="col">JobManager</th>
                    <th scope="col">ClientName</th>
                </tr>
                <tr class="row">
                    <td>
                        <input id="ctl00_PlaceHolderMain_myGrid_ctl02_CheckBox1" type="checkbox" name="ctl00$PlaceHolderMain$myGrid$ctl02$CheckBox1" data-flag="false" />
                    </td>
                    <td>column1</td>
                    <td>column2</td>
                    <td>column3</td>
                    <td>column4</td>
                    <td>column5</td>
                </tr>
                <tr class="row">
                    <td>
                        <input id="ctl00_PlaceHolderMain_myGrid_ctl02_CheckBox2" type="checkbox" name="ctl00$PlaceHolderMain$myGrid$ctl02$CheckBox2" data-flag="false" />
                    </td>
                    <td>column6</td>
                    <td>column7</td>
                    <td>column8</td>
                    <td>column9</td>
                    <td>column10</td>
                </tr>
                <tr class="row">
                    <td>
                        <input id="ctl00_PlaceHolderMain_myGrid_ctl02_CheckBox3" type="checkbox" name="ctl00$PlaceHolderMain$myGrid$ctl02$CheckBox3" data-flag="false" />
                    </td>
                    <td>column11</td>
                    <td>column12</td>
                    <td>column13</td>
                    <td>column14</td>
                    <td>column15</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="m0 selected"> <span>Selected...

CSS

.divMain {
    height: 300px;
    overflow: auto;
    float: left
}
.table {
    color:#333333;
    width:100%;
    border-collapse:collapse;
}
.rowHead {
    color:White;
    background-color:#5D7B9D;
    font-weight:bold;
}
.row {
    color:#333333;
    background-color:#F7F6F3;
}
.m0 {
    margin-top: 0px;
}
.selected {
    margin-left: 10px;
    float: left
}

a{
     margin-left: 20px;   
}
}

JavaScript

var flag = false;       
$("#ctl00_PlaceHolderMain_myGrid input").change(function () {
    // Next cache your selector
    // so that you need not crawl the DOM multiple times
    var $this = $(this),
        $row = $this.closest('.row'),
        currFlag = Boolean($this.data('flag'));

    // As there might be multiple jobs , a single flag variable will not work 
    // So you can set a data-flag attribute on the input that stores the current value
    if (currFlag === false && this.checked) {
        // Set the corresponding flag to true
        $this.data('flag', true);
        var jobCode = $row.find("td:eq(2)").text(),
            jobName = $row.find("td:eq(1)").text(),
            displayvalue = jobCode.toUpperCase() + " - " + jobName.toUpperCase(),
            inputId =  $this.attr('id')
        // Pass the input name too as you need to set the value of
        // the corresponding flag value again as you can add it multiple times
        AddSelectedJob(jobCode, displayvalue, inputId);
        FillSelectedJobs();
    }
});

//Add selected job in the results div
function AddSelectedJob(id, display, inputId) {
    //create a div for every selected job
    // Use the inputId to save it as a data-id attribute on anchor so that you can 
    // set the value of the flag after removing it
    var html = '<div class="selectedjobs" id=' + id + '>' + display ;
    html += '<a href="javascript" data-id="'+ inputId +'">Remove selected job</a></div>';                   
    $('[id$=ResultsDiv]').append(html);
}
        
// Remove the inline click event for the anchor and delgate it to the 
// static parent container
$('[id$=ResultsDiv]').on('click', 'a', function(e) {
    var $this = $(this),
        $currentCheckbox = $this.data('id');
    // Set the flag value of the input back to false
    
    $('#'+ $currentCheckbox).data('flag', false);
    e.preventDefault(); // prevent the default action of the anchor
    $this.closest('.selectedjobs').remove();
});


function...