JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/css/bootstrap-select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/js/bootstrap-select.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<body>
<div class="container">
	<div class="page-header">
	  <h1>Dynamic Data Grid<small> using jQuery and Bootstrap</small></h1>
	</div>
	<form class="space form-horizontal">
		<div class="colMasterGroup">
			<div class="row"><h3>Column Master</h3></div>
			<hr>
			<div class="form-group">
				<button type="button" id="addcol" class="btn btn-success" type="submit"><span class="glyphicon glyphicon-plus" aria-hidden="true" data-toggle="modal" data-target="#myModal"></span>Add Column</button>
				<button type="button" id="deletecol" class="btn btn-danger" type="submit"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Remove Column</button>
				<table id="colMasterTable" class="table table-bordered table-hover">
				  <tr>
				    <th><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></th>
				    <th>Column Name</th>
				    <th>Column Type</th>
				    <th>Column Editable</th>
				  </tr>
				  <tr>
				    <td id="tdcolSelect"><input type="checkbox" aria-label="..."></td>
				    <td id="tdcolName">Column 1</td>
				    <td id="tdcolType">Number</td>
				    <td id="tdcolEditable">Yes</td>
				  </tr>
				</table>
			</div>
		</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <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"...

CSS

body{
	height: 100%;
}
button, .dropdown-menu, input{
	border-radius: 0 !important;
}
button{
	min-width: 150px;
}
button span{
	margin-right: 10px;
}
table{
	margin-top: 25px;
}
span.glyphicon-edit{
	text-align: center;
}
form.space{
	margin: 20px;
}
table tr{
	cursor: pointer;
}
/*Select box */
.bootstrap-select button span:first-of-type{
	float:none !important;
}
.dropdown-menu{
	padding: 0 !important;
}

/*Modal*/
.modal-body .row{
	margin-bottom: 10px !important;
}
.modal-content button span{
	float: right !important;
}
.modal-content button{
	min-width: 100px;
}
label{
	line-height: 33px;
}

#colName{
	width: 220px;
}

JavaScript

$(document).ready(function() {


	$('.selectpicker').selectpicker();

	$('body').on('hidden.bs.modal', '.modal', function () {
    	$(this).removeData('bs.modal');
	});


	$('body').on('click', '#addcol', function(){
		$('#myModal').modal('show');
	});

	$('#myModal').on('click', '#modalCancel', function(){
			$('#myModal').modal('hide');
	});

	$('#myModal').on('click', '#modalAdd', function(){
			var newColumnName = $('#colName').val();
			var newColumnType = $('#colType option:selected').val();
			var newColumnEditable = $('#colEditable option:selected').val();
			newColVal = '<tr><td id="colSelect"><input type="checkbox" aria-label="..."></td><td id="colName">'+newColumnName+'</td><td id="colType">'+newColumnType+'</td><td id="colEditable">'+newColumnEditable+'</td></tr>'
			$('#colMasterTable tr:last').after(newColVal);
			$('#myModal').modal('hide');

			$('#genResultTable').click({ncn: newColumnName, nct: newColumnType, nce: newColumnEditable}, genResTable);
			
	});

	function genResTable(event){
		console.log(event.data.ncn);
		//The New column should be added to the Result Table
		var newTableHead = '<th>'+event.data.ncn+'</th>';
		var newTableCol = '<td>'+event.data.nct+'</td>';
		console.log(newTableCol);
		$("#resultTable tr:first th:last").after(newTableHead);
		$("#resultTable tr:not(:first)").each(function(){
			$("td:last").after(newTableCol);
		}); 

	}

	$('#addrow').on('click', function() {
		var newRow = '<tr><td><input type="checkbox" aria-label="..."></td><td></td><td></td><td></td><td></td></tr>';
        $("#resultTable tr:last").after(newRow);
	});

	$('#deleterow').click(function() {
		$('table tr').has('input:checked').remove();
	});

});