<!-- Begin Body --> 
<form  role="form" id="units_form" class="form-horizontal">
	<div class="container-fluid" style="padding-top:120px; height:auto">
		<div class="row"><br/></div> 
		<div class="row">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center center"> 
				
			</div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center center"> 
				<fieldset> 
					<div class="form-group"> 
						<table class="table table-striped table-hover table-bordered"  style="width:100%;" >  
					        <tbody id="tbody"> 
					        <?php if($action=='create'){ ?>
					        	<tr> 
					            	<td><label>Block</label></td>
					            	<td><input type="text" name="UnitBlock[]"  maxlength="5" class="form-control"></td>
					            	<td><label>Lot</label></td>
					            	<td><input type="number" name="UnitLot[]" class="form-control"></td>
					            	<td><button type="button" class="btn btn-danger btn-xs" onclick="deleteRow(this);"><span class="glyphicon glyphicon-trash"></span></button></td>
					        	</tr>
					        <?php } ?>
					        </tbody>
					    </table>  
					    <button type="button" onclick="addItem();" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span>&nbsp; Add New Block and Lot &nbsp;</button>

					</div> 
				</fieldset>
			</div> 
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center center"> </div>
		</div>
		<div class="row"><br/></div>
	</div>
</form>
 
<script>
    var items = 0;
    function addItem() {
        items++; 
        var html = '<tr>'; 
        	html += '<td><label>Block</label></td>';
            html += '<td><input type="text" name="UnitBlock[]"  maxlength="5" class="form-control"></td>';
            html += '<td><label>Lot</label></td>';
            html += '<td><input type="number" name="UnitLot[]" class="form-control"></td>';
            html += '<td>&nbsp;<button type="button" class="btn btn-danger btn-xs" onclick="deleteRow(this);"><span class="glyphicon glyphicon-trash"></span></button>&nbsp;</td>';
        html += '</tr>';
 
 
        var row = document.getElementById("tbody").insertRow();
        row.innerHTML = html;
    }
 
function deleteRow(button) {
    items--
    button.parentElement.parentElement.remove();
    // first parentElement will be td and second will be tr.
}
</script>