JSFiddle - React, Tailwind, and code Playground

by Ryan Verner

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="/cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
   
    <h3>Selected</h3>
    
            <table id="trackselected" class="table table-striped">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>title</th>
                    </tr>
                </thead>
            </table>

    <hr />
    
    <h3>Master List (Click To Select)</h3>
    
                 <table id="tracks" class="table table-striped">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>title</th>
                        </tr>
                    </thead>
                </table>

JavaScript

$(document).ready(function() {
    
    var tracktable = $('#tracks').dataTable( {
        "bPaginate": false,
        "bFilter": false, 
        "ajax": {
            "url": "https://catstick.com/jsfiddle/depth1.json",
            "dataSrc": "track"
        },
        "columnDefs": [
            { "targets": 0, "data": "id" },
            { "targets": 1, "data": "title" }
        ]
    } );   
      
     var selectedtable = $('#trackselected').dataTable( {
        "bPaginate": false,
        "bFilter": false, 
        "ajax": {
            "url": "https://catstick.com/jsfiddle/depth2.json",
            "dataSrc": ""
        },
        "columnDefs": [
            { "targets": 0, "data": "track.id" },
            { "targets": 1, "data": "track.title" }
        ]
    } ); 
 
    $('#tracks tbody').on( 'click', 'tr', function () { 
        var trackTitle = tracktable.fnGetData(this).title;
        var trackId = tracktable.fnGetData(this).id;
        selectedtable.fnAddData( { 'track.id': trackId, 'track.title': trackTitle } );
        //votetable.fnAddData( [ trackId, trackTitle ]);  
    } );    
    
});