JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.js"></script>
    <div class="container"> 
				<p>TABLE 1</p>
        <table id="summaryTable" data-detail-view="true">
					<thead>
						<tr>
								<th data-field="id" data-align="center" data-width="20px" >id</th>
								<th data-field="name" data-align="center">Name</th>
						</tr>
					</thead>
				</table>
        <br>
        
        
        
        <p>TABLE 2</p>
        <table id="detailTable"></table>
	
  
  </div>

JavaScript

$(document).ready(function() {	
	var t = [
      {  "id": "1",
       	"name": "john",
      },
      { "id": "2",
        "name": "ted"
      }
    ];
	
  
  //TABLE 1
  $('#summaryTable').bootstrapTable({
    data: t,
    detailFormatter: detailFormatter
  });
   
  function detailFormatter(index, row, element) {
    $(element).html(row.name);
    $(element).html(function(){
				//I was thinking of putting the code here, but I don't know how to do it so it will work,
        //except javascript, it needs to be put this html code <table id="detailTable"></table>
			
		});
    
    
  //   return [
       
    //    ].join('');
  }
 
 //TABLE 2
 var t2 = [
      {  "id": "1",
       	"shopping": "bike",
      },
      { "id": "2",
        "shopping": "car"
      }
    ];
	$('#detailTable').bootstrapTable({
  	data: t2,
  	columns: [{
              	field: 'id',
								title: 'id'
            	}, {
              	field: 'shopping',
            	  title: 'Shopping detail'
          	  }, {
              	field: 'status',
                checkbox: true
              }
						],
    checkboxHeader: false
   
  });
  $('#detailTable').on('check.bs.table', function (e, row, $el) {
    	alert('check index: ' + row.shopping);
    });
  $('#detailTable').on('uncheck.bs.table', function (e, row, $el) {
    alert('uncheck index: ' + row.shopping);
  });
	 
});