<style type="text/css">
.inputUpd {
	font-size:10px;
	padding:5px;
	height:22px;
}
</style>
<div class="col-md-5">
	<div class="box box-widget">
		<div class="box-header with-border">
			<div class="user-block">
				<h3 class="box-title">Detail Item</h3>
			</div>
		</div>
		<div class="box-body">
			
			<div class="form-group">
				<table class="table table-bordered detail">
					<thead>
						<tr>
							<th style="width: 5%">No</th>
							<th style="width: 69%">Nama Item</th>
							<th style="width: 21%">Jumlah</th>
							<th style="width: 5%"><input type="button" id="addrow" value="+"/></th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
			
			<label><b>Keterangan</b></label>
			<div class="form-group">
				<textarea rows="3" class="form-control" name="keterangan"></textarea>	
			</div>
			
		</div>
		<div class="box-footer">
			<div class="user-block">
				<span class="pull-right">
					<a href="" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> Kembali</a>
					<input type="submit" class="btn btn-primary btn-sm" id="create_bast" value="Create" />
				</span>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
$(document).ready(function() {
	
	// const maxRows = 5;
	$("#addrow").on("click", function() {
		const counter = $("table.detail tbody tr").length;
		
		// $(this).prop("disabled",counter >= maxRows-1); // OR the one below
    
		const newRow = $("<tr/>");
		const cols = '<td id="row'+counter+'">'+(counter+1)+'</td>' +
			'<td><input type="text" class="form-control inputUpd items" name="items[]" id="items'+counter+'" required /></td>' + 
			'<td><input type="number" min="0" class="form-control inputUpd items_qty" name="items_qty[]" id="items_qty'+counter+'" required /></td>' + 
			'<td><input type="button" class="removerow" value="-"/><input type="hidden" name="idItem[]" id="idItem'+counter+'"></td>'
		newRow.append(cols);
		$("table.detail tbody").append(newRow);
		
		return false;
	});
	
	$("table.detail").on("click", ".removerow", function(event) {
		$(this).closest("tr").remove();
		$('table.detail').find('tbody > tr').each(function(index) {
			var newCount = index + 1;
			$(this).find('[id^=items]').attr('id','items' + (newCount-1));
			$(this).find('[id^=items_qty]').attr('id','items_qty' + (newCount-1));
			$(this).find('[id^=idItem]').attr('id',(newCount-1));
			$(this).find('[id^=row]').attr('id','row' + newCount).html(newCount);
		});
	});
	
});
</script>