I have created a dynamic table where rows and columns can be added dynamically. However, I am facing an issue where I am unable to add a new column between the first and last column of the table. Currently, new columns are only being added at the end.
$('#irow').click(function(){
if($('#row').val()){
$('#mtable tbody').append('<tr><td>Some Item</td></tr>');
$('#mtable tbody tr:last td:first').html($('#row').val());
}else{alert('Enter Text');}
});
$('#icol').click(function(){
if($('#col').val()){
$('#mtable tr').append($("<td>"));
$('#mtable thead tr>td:last').html($('#col').val());
$('#mtable tbody tr').each(function(){$(this).children('td:last').append($('<input type="text">'))});
}else{alert('Enter Text');}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table border="1" id="mtable" class="table table-striped table-hover individual">
<thead><tr><td>Employee \department</td><td>Mandatory</td></tr></thead>
<tbody></tbody>
</table><br/><br/>
<input id="row" placeholder="Enter Employee Name"/><button id="irow">Add Board</button><br/><br/>
<input id="col" placeholder="Enter department Name"/><button id="icol">Add Subject</button>I need assistance in adding new columns between the "Employee" and "Mandatory" columns.
Kindly provide your support.