I'm trying to design an invoice using bootstrap table and forms, i got the code to dynamically add and delete rows at the end of the table using jquery, but i want to to be able to add rows after any row inside the table.
I've tried many similar answers from here using append(),prepend() and insertBefore() but couldn't get it to work.
$(function () {
$("#insertRow").on("click", function (event) {
event.preventDefault();
var newRow = $("<tr class='d-flex'>");
var cols = '';
// Table columns
cols += '<td class="col-2 border"><div class="form-group justify-content-center d-flex"><input type="number" class="form-control" id="slno"></div></td>';
cols += '<td class="col-4 border text-center"><div class="form-group justify-content-center d-flex"><textarea class="form-control" id="desc" rows="3"></textarea></div></td>';
cols += '<td class="col-2 border"><div class="form-group justify-content-center d-flex"><input type="number" class="form-control" id="slno"></div></td>';
cols += '<td class="col-3 border text-center"><div class="form-group justify-content-center d-flex"><textarea class="form-control" id="desc" rows="3"></textarea></div></td>';
cols += '<td class="col-1 border"><div class="form-group"><button class="btn btn-dark" id ="deleteRow"><i class="fa fa-trash"></i></button></div></td></tr>';
// Insert the columns inside a row
newRow.append(cols);
// Insert the row inside a table
$('#tabl tr:last').before(newRow);
});
// Remove row when delete btn is clicked
$("table").on("click", "#deleteRow", function (event) {
$(this).closest("tr").remove();
});
});@media (min-width: 576px) {
.form-inline .form-control {
display: inline-block;
vertical-align: middle;
flex: 8;
}
.form-inline label {
display: inline-block;
flex: 4;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Invoice</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form method="POST" action="genpdf.php">
<div class="table-responsive bg-light">
<table id="tabl" class="table table-borderless border border-dark">
<tbody>
<tr class="d-flex border">
<td class="col-2">
<img class="img-fluid" src="images/c.png" style="max-height: 120px!important;"/>
</td>
<td class="col-6">
<h2>words here</h2>
<p class="font-italic">words here<br />
words here</p>
</td>
<td class="col-4">
<p class="text-right">
words here
</p>
<div class="form-group form-inline justify-content-end d-flex">
<label for="gstin">words here</label>
<input type="text" class="form-control" id="gstin">
</div>
</td>
</tr>
<tr class="d-flex">
<td class="col-6 border">
<p>wh</p>
<div class="form-group">
<label for="rec">wh</label>
<textarea class="form-control" id="rec" rows="3"></textarea>
</div>
<div class="form-group form-inline">
<label for="party">words here</label>
<input type="text" class="form-control" id="party">
</div>
</td>
<td class="col-6 border">
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">words here</label>
<input type="text" class="form-control" id="del" readonly>
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="date">words here</label>
<input type="text" class="form-control" id="date">
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">words here</label>
<input type="text" class="form-control" id="del">
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">words here</label>
<select class="form-control" id="del">
<option>words here</option>
<option>words here</option>
</select>
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">words here</label>
<input type="text" class="form-control" id="del">
</div>
</td>
</tr>
<tr class="d-flex">
<td class="col-12 border">
words here
</td>
</tr>
<div>
<tr class="d-flex">
<td class="col-2 border">
<p class="justify-content-center d-flex">one</p>
</td>
<td class="col-4 border">
<p class="justify-content-center d-flex">two</p>
</td>
<td class="col-2 border">
<p class="justify-content-center d-flex">three</p>
</td>
<td class="col-3 border">
<p class="justify-content-center d-flex">four</p>
</td>
<td class="col-1 border">
<div class="justify-content-center d-flex"></div>
</td>
</tr>
</div>
<tr class="d-flex" id="rw">
<td class="col-2 border">
<div class="form-group justify-content-center d-flex">
<input type="number" class="form-control" id="slno">
</div>
</td>
<td class="col-4 border text-center">
<div class="form-group justify-content-center d-flex">
<textarea class="form-control" id="desc" rows="3"></textarea>
</div>
</td>
<td class="col-2 border text-center">
<div class="form-group justify-content-center d-flex">
<input type="number" class="form-control" id="quan">
</div>
</td>
<td class="col-3 border text-center">
<div class="form-group justify-content-center d-flex">
<textarea class="form-control" id="remr" rows="3"></textarea>
</div>
</td>
<td class="col-1 border">
<div class="form-group justify-content-center d-flex"><button class="btn btn-dark" id ="deleteRow"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="d-flex">
<td class="col-12 border">
<button class="btn btn-dark" id="insertRow" href="#">Add New Row</button>
</td>
</tr>
<tr class="d-flex">
<td class="col-5">
<p>words here</p>
</td>
<td class="col-3">
</td>
<td class="col-4">
<p>words here</p><br />
<p>words here</p>
</td>
</tr>
<tr class="d-flex">
<td class="col-5">
<p>words here</p>
</td>
<td class="col-3">
</td>
<td class="col-4">
<p>words here</p><br />
<p>words here</p>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</body>
</html>