JSFiddle - React, Tailwind, and code Playground
HTML
<form class="center" name="cForm" id="test">
<table class="table table-responsive">
<thead>
<tr>
<th scope="col">Наименование</th>
<th scope="col">Количество</th>
<th>-</th>
</tr>
</thead>
<tbody id="table_ajax">
<tr>
<input type="hidden" name="form_id" value="277">
<td>Тестовый айтем 277</td>
<td><input type="number" class="form-control number" min="1" max="10" name="quantity" value="6"></td>
<td><button type="button" name="delete_item" id="item_delete" class="close deleter" aria-label="Close" value="277" data-toggle="tooltip"><span aria-hidden="true">×</span></button></td>
</tr>
<tr>
<input type="hidden" name="form_id" value="278">
<td>Тестовый айтем 278</td>
<td><input type="number" class="form-control number" min="1" max="10" name="quantity" value="6"></td>
<td><button type="button" name="delete_item" id="item_delete" class="close deleter" aria-label="Close" value="278" data-toggle="tooltip"><span aria-hidden="true">×</span></button></td>
</tr>
</tbody>
</table>
</form>
JavaScript
function performWork(el, el2){
el.preventDefault();
let data = $('#test').serialize();
/*$.ajax({
type: "POST",
url: "delete_me.php",
data: data,
success: function(html){
$("#table_ajax").load('table.php');
$('#order')[0].reset();
}
});*/
$( "#table_ajax" ).append(addHtml());
return true;
}
let codeVar = 278;
function addHtml (){
++codeVar;
return ('<tr>' +
'<input type="hidden" name="form_id" value="' + codeVar + '">' +
'<td>Тестовый айтем ' + codeVar + '</td>' +
'<td><input type="number" class="form-control number" min="1" max="10" name="quantity" value="' + Math.round(Math.random() * 10) + '"></td>' +
'<td><button type="button" name="delete_item" id="item_delete" class="close deleter" aria-label="Close" value="' + codeVar + '" data-toggle="tooltip"><span aria-hidden="true">×</span></button></td>' +
'</tr>')
}
document.querySelector('#table_ajax').addEventListener('click', function(el){
if(el.target && (el.target.matches('button') || el.target.matches('span'))){
performWork(el, $(this).closest('tr'));
}
})