You can use jQuery insertAfter for doing this.
Moreover you need to set the event on document, since the buttons are not existing on initialization but created dynamically.
var filterTableNum = 0;
$('.add-table').click(add_empty_table);
$(document).on('click', '.btwn-table', add_table_between);
function create_table() {
const originTable = document.getElementById('source-table');
let newTable = originTable.cloneNode(true);
newTable.id = 'source' + ++filterTableNum;
newTable.querySelectorAll('input').forEach((element) => {
element.value = '';
});
$(newTable).find('.component-id').val(newTable.id);
return $(newTable);
}
function add_empty_table() {
let newTable = create_table();
$('#main-div').append(newTable);
}
function add_table_between(e){
let newTable = create_table();
let originTable = $(e.target.closest('table'));
newTable.insertAfter(originTable);
}#container>table{
display:none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="add-table">
Add Table
</button>
<div id="container">
<table
id="source-table"
data-component-type="Source"
class="component-base table table-responsive table-striped rounded"
>
<thead class="thead-dark">
<tr>
<th colspan="6" class="text-center">
<span>Source : </span
><input
id="id"
type="text"
name="id"
placeholder="id"
class="component-id form-control-head"
/>
<button
class="delete-component btn btn-danger"
style="margin: 1%;"
>
Delete Table
</button>
</th>
</tr>
<tr>
<th scope="row">Type</th>
<th scope="row">Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input
id="type"
type="text"
name="type"
class="form-control"
placeholder="Type"
/>
</td>
<td>
<input
id="Name"
type="text"
name="name"
class="form-control"
placeholder="Name"
/>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<button class="btwn-table">Add Table Here</button>
</td>
</tr>
</table>
<div class="main-div" id="main-div"></div>