JSFiddle - React, Tailwind, and code Playground

by vishal pandey

HTML

<div class="well white">
        <table id="SampleDT" class="datatable table table-hover table-striped table-bordered tc-table">
            <thead>
                <tr>
                    <th>Select</th>
                    <th>Id</th>
                    <th>Doctor Name</th>
                    <th>From Area</th>
                    <th>To Area</th>
                    <th>Address</th>
                </tr>

            </thead>
            <tbody>
                <tr>

                </tr>
            </tbody>

        </table>

        <center>
            <div class="form-group">
                <button type="button" class="btn btn-primary" style="text-align:left;" id="get_to_area">Transfer Area</button>
            </div>
        </center>
    </div>

JavaScript

var data = [{ id: 1, name: 'abc', area: 'qwert', to_area: '123', address: '456' },
        { id: 2, name: 'xyz', area: 'poiuy', to_area: '456', address: '789' },
        { id: 3, name: 'pqr', area: 'vbnmj', to_area: '123', address: '456' }];
                           // var res = jQuery.parseJSON(data);// convert the json
                           // console.log(res);
                            if (data.length > 0) {
                                var htmlString = '';
                                $.each(data, function (key, value) {
                                    htmlString += '<tr>';
                                    htmlString += ' <td class="sorting_1"><div class="checkbox-custom checkbox-success"><input type="checkbox" id="checkboxExample3" name="getchemist" class="getchemist" value="' + value.id + '"><label for="checkboxExample3"></label></div></td>';
                                    htmlString += '<td class="chkid">' + value.id + '</td>';
                                    htmlString += '<td>' + value.name + '</td>';
                                    htmlString += '<td>' + value.area + '</td>';
                                    htmlString += '<td class="toarea">' + value.to_area + '</td>';
                                    htmlString += '<td>' + value.address + '</td>';
                                    htmlString += '</tr>';

                                });
                                $('#SampleDT tbody').empty().append(htmlString);


                                $('#get_to_area').click(function () {
                                    $('.sorting_1 input[type="checkbox"]').each(function (i) {
                                        if ($(this).is(':checked')) {
                                            var ID = $(this).parent().parent().siblings('td.chkid').html();
                                            var TO_Area = $(this).parent().parent().siblings('td.toarea').html();
                     alert('ID:' + ID);
...