JSFiddle - React, Tailwind, and code Playground

HTML

<table id="example" cellspacing="0" width="20%">
  <thead>
    <tr>
	  <th><button type="button" id="selectAll" class="myClass">Select</button></th>
		<th>number</th>
        <th>company</th>
		<th> Type</th>
		<th> Address</th>
		<th>Code</th>
	</tr>								      	
 </thead>
			

<tbody>										
  <tr>											
    <td><span class="button-checkbox">
      <button type="button" class="btn-chk" data-color="success"></button>
      <input type="checkbox" class="hidden" />
       </span>
		</td>
		<td>1</td>
		<td>APPLE</td>
		<td>IT</td>
		<td>San Jones</td>
	    <td>US</td>
		</tr>
  
		<tr>
		<td><span class="button-checkbox">
		<button type="button" class="btn-chk" data-color="success"></button>
	    <input type="checkbox" class="hidden"  />
		</span>
        </td>
          <td>2</td>
		  <td>DELL</td>
		  <td>IT</td>
          <td>San Jones</td>
          <td>US</td>
      </tr>
  
      <tr>
        <td><span class="button-checkbox">
	   <button type="button" class="btn-chk" data-color="success"></button>                                                           
	   <input type="checkbox" class="hidden"  />
       </span>
	   </td>
	<td>3</td>
	<td>Amazon</td>
	<td>IT</td>
	<td>San Jones</td>
	<td>US</td>
	</tr>
  
	<tr>
	<td><span class="button-checkbox">
    <button type="button" class="btn-chk" data-color="success"></button>
    <input type="checkbox" class="hidden"  />
    </span>
	</td>
	<td>4</td>
	<td>Microsoft</td>
	<td>IT</td>
	<td>San Jones</td>
	<td>US</td>
	</tr>
	</tbody>

CSS

body{font-family:verdana;font-size:12px;}
h2 {padding:5px;background:#222;margin:0px;color:#fff;}
ul,li{list-style:none;margin:0;padding:0;}
#products { float:left; width: 500px; }
#cart { width: 200px; float: left; margin-top: 1em; }
#cart ol {margin:0;padding:0;background:#E1FFDF;clear:both;overflow:hidden;}
#cart ol li{padding:10px;border-top:2px solid #fff;width:50px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;float:left;border-left:2px solid #000;cursor:pointer;}
#cart ol li:first-child{border-top:none;}
#products li{background:#eee;padding:5px;cursor:pointer;margin-bottom:5px;}
#products,#cart{display:block;clear:both;width:400px;}
.placeholder{background:none;color:#888;cursor:default;margin-bottom:0 !important;text-align:center;width:100% !important;float:none !important;border:none !important;}

JavaScript

var chkd=true; 
$('#selectAll').click(function(event) {  
     
     $(":checkbox").prop("checked",chkd);
    chkd=!chkd;
           });