JSFiddle - React, Tailwind, and code Playground

by jecker

HTML

Item Name: <input type="text" value="" name="itemEnglish" id="itemEnglish">
Item Nombre: <input type="text" value="" name="itemSpanish" id="itemSpanish">

<table  id="itemData">
    <td>Item Name</td>
    <td>Item Nombre</td>
    <td width="20%">&nbsp;</td>
</table>
<div id="addItem" align="right">+/- Add Row</div>

JavaScript

$('#addItem').click(function() {
	$('#itemData tbody:last-child').append('<tr><td align="left"><input id="ItemName[]" name="ItemName[]" type="hidden" value="'+$('#itemEnglish').val()+'">'+$('#itemEnglish').val()+'</td><td align="left"><input id="ItemNombre[]" name="ItemNombre[]" type="hidden" value="'+$('#itemSpanish').val()+'">'+$('#itemSpanish').val()+'</td><td><div id="editItem" onClick="editItem(this);">edit</div> / delete</td></tr>');
});

function editItem() {
 alert('You clicked edit and here is the information '+ $(this).parent().parent().children().index($(this).parent()) );   
}