JSFiddle - React, Tailwind, and code Playground

by Eric L

HTML

<script src="https://cdn.datatables.net/r/bs/dt-1.10.9,b-1.0.3,b-colvis-1.0.3,b-html5-1.0.3,b-print-1.0.3,cr-1.2.0,fc-3.1.0,r-1.0.7,rr-1.0.0,sc-1.3.0,se-1.0.1/datatables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<form>
   <div class="col-xs-6">   
     <div class="table-responsive">   
       <table class="table table-striped table-bordered table-condensed dt-responsive" id="region">
         <thead>
           <tr>
              <th class="col-md-2">Region Name</th>
              <th class="col-md-1">Store Count</th>
           </tr>
         </thead>
         <tbody>
           <tr>
              <td class="col-md-2"><input type="text" value="Central WI"/></td>
              <td class="col-md-1">12</td>
           </tr>
           <tr>
              <td class="col-md-2"><input type="text" value="Western WI"/></td>
              <td class="col-md-1">12</td>
           </tr>
           <tr>
              <td class="col-md-2"><input type="text" value="Southern WI"/></td>
              <td class="col-md-1">666</td>
           </tr>
           <tr>
              <td class="col-md-2"><input type="text" value="Northern WI"/></td>
              <td class="col-md-1">24</td>
           </tr>
           <tr>
              <td class="col-md-2"><input type="text" value="Northern IL"/></td>
              <td class="col-md-1">112</td>
           </tr>               
         </tbody>       
       </table>     
     </div>  
   </div>
   <div class="col-xs-6">
      <div class="table-responsive">
           <table class="table table-striped table-bordered table-condensed dt-responsive" id="site">
            <thead>
               <tr>
                  <th class="col-md-2">Site</th>
                  <th class="col-md-1">Selected</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td class="col-md-2">Eau Claire</td>
                  <td...

CSS

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url('//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css');




tr.row_selected td{background-color:#66CCFF;}
tr.row_selected_off td{color:black;}

JavaScript

$(document).ready(function() {
    var table = $('#region').DataTable({
      fixedHeader : true,
      paging : false,
      select : 'single',
      

      'sDom' : 't' //code to delete the search bar

    });
   });  
  $(function() {
		function moveItems(origin, dest) {
			$(origin).find(':selected').appendTo(dest);
		}

		function moveAllItems(origin, dest) {
			$(origin).children().appendTo(dest);
		}

		$('#left').click(function() {
			moveItems('#sbTwo', '#sbOne');
		});

		$('#right').on('click', function() {
			moveItems('#sbOne', '#sbTwo');
		});

		$('#leftall').on('click', function() {
			moveAllItems('#sbTwo', '#sbOne');
		});

		$('#rightall').on('click', function() {
			moveAllItems('#sbOne', '#sbTwo');
		});
		$("#insert-more").click(function() {
			$("#region").each(function() {
				var tds = '<tr>';
				tds += '<td><input type="text"></input></td><td>0</td>';
				tds += '</tr>';
				if ($('tbody', this).length > 0) {
					$('tbody', this).append(tds);
				} else {
					$(this).append(tds);
				}
			});
		});
      
	    $('#region tbody').on( 'click', 'tr', function () {
	        if ( $(this).hasClass('selected') ) {
	            $(this).removeClass('selected');
	        }
	        else {
	            table.$('tr.selected').removeClass('selected');
	            $(this).addClass('selected');
	        }
	    } );
	  	$("#region tbody tr").on('click',function(event) {
	  		$("tbody tr").removeClass('row_selected');		
	  		$(this).addClass('row_selected');
	  	});
	  	$("#region tbody tr").on('mouseleave',function(event) {
	  		if ($("#region tbody tr").hasClass('row_selected')) {
	  		  $(this).addClass('row_selected_off');
	  		}	  			  		
	  	});
	  		  		  	
	});