JSFiddle - React, Tailwind, and code Playground

by Kfr Janssens

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>

    <div class="modal fade" id="modalAddStaff" tabindex="-1" role="dialog" aria-labelledby="modalAddStaff">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Selecteer medewerker</h4>
      </div>
      <div class="modal-body">
        
		<table class="table">
		<thead>
		<tr>
			<th>Medewerker</th>
			<th>Functie</th>
		</tr>	
		</thead>
		<tbody>
							<tr id="3;Kenny Janssens" class="selectStaff">
					<td>Kenny Janssens</td>
					<td>zaakvoerder</td>
				</tr>
							<tr id="4;Test User" class="selectStaff">
					<td>Test User</td>
					<td>zaakvoerder</td>
				</tr>
							<tr id="6;Regi" class="selectStaff">
					<td>Regi</td>
					<td>zaakvoerder</td>
				</tr>
							<tr id="5;Patrick" class="selectStaff">
					<td>Patrick</td>
					<td>manager</td>
				</tr>
							<tr id="8;keuken staff 1" class="selectStaff">
					<td>keuken staff 1</td>
					<td>keuken</td>
				</tr>
							<tr id="11;kok kokki" class="selectStaff">
					<td>kok kokki</td>
					<td>keuken</td>
				</tr>
							<tr id="7;Ellen Trikkepaal" class="selectStaff">
					<td>Ellen Trikkepaal</td>
					<td>zaal</td>
				</tr>
							<tr id="9;Zaalmedewerker 4" class="selectStaff">
					<td>Zaalmedewerker 4</td>
					<td>zaal</td>
				</tr>
							<tr id="10;Andere medewerker 77" class="selectStaff">
					<td>Andere medewerker 77</td>
					<td>overige</td>
				</tr>
						
		</tbody>	
		</table>
		
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-warning" data-dismiss="modal">Annuleren</button>
      </div>
    </div>
  </div>
</div>
<!-- END MODAL...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

JavaScript

//prevent Modal buttons to submit the form
$('.dontSubmit').click(function(e) {
	e.preventDefault();
	alert('prevent!');
}
$('.selectStaff').click(function(e) {
    //alert( this.id );
    data = this.id.split(";");
    $("#selectedStaffName").html(data[1]);
    $("#staff_id").val(data[0]);
    $('#modalAddStaff').modal('hide');
});
$('.selectCosttype').click(function(e) {
    //alert( this.id );
    data = this.id.split(";");
    $("#selectedCosttypeLabel").html(data[1]);
    $("#costtype_id").val(data[0]);
    $('#modalAddCosttype').modal('hide');
});