JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		
		<title>DataTables Editor - Climbing</title>

		<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/se-1.2.2/datatables.min.css">
		<link rel="stylesheet" type="text/css" href="css/generator-base.css">
		<link rel="stylesheet" type="text/css" href="css/editor.bootstrap.min.css">

		<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/se-1.2.2/datatables.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/editor.bootstrap.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/table.Climbing.js"></script>
	</head>
	<body class="bootstrap">
		<div class="container">

			<h1>
				DataTables Editor <span>Climbing</span>
			</h1>
			
			<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="Climbing" width="100%">
				<thead>
					<tr>
						<th>First name</th>
						<th>Surname</th>
						<th>Level</th>
						<th></th> 
					</tr>
				</thead>
			</table>

		</div>
	</body>
</html>

JavaScript

/*
 * Editor client script for DB table Climbing
 * Created by http://editor.datatables.net/generator
 */

 function format (  ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}
	
	

$(document).ready(function() {
	var editor = new $.fn.dataTable.Editor( {
		ajax: 'php/table.Climbing.php',
		table: '#Climbing',
		fields: [
			{
				"label": "First name:",
				"name": "first_name"
			},
			{
				"label": "Surname:",
				"name": "surname"
			},
			{
				"label": "Level:",
				"name": "level",
				"type": "checkbox",
				"def": "Top Roper",
				"separator": ",",
				"options": [
					"Top Roper",
					" Instructor",
					" Assessor",
					" Lead climber",
					" Lead Climber Instructor  "
				]
			},
			{
				"label": "Student ID number:",
				"name": "student_id_number"
			},
			{
				"label": "Email:",
				"name": "email"
			},
			{
				"label": "Assessor :",
				"name": "assessor_"
			}
		]
	} );

	var table = $('#Climbing').DataTable( {
		ajax: 'php/table.Climbing.php',
		columns: [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
			{
				"data": "first_name"
			},
			{
				"data": "surname"
			},
			{
				"data": "level"
			}

			{   "data": "Email" ,"visible": false }
			
		],
		select: true,
		lengthChange: false
	} );

	// Add event listener for opening and closing details
    $('#climbing tbody').on('click', 'td.details-control', function () {
       ...