JSFiddle - React, Tailwind, and code Playground
HTML
<table width="600px" class="setpoint-form-table">
<tr>
<td width="100px" style="font-size:14px;">Email</td>
<td>
<input type="text" id="email" class="setpoint-textbox" />
</td>
<td>
<button type="button" onclick="UpdateList()">Update</button>
</td>
</tr>
<tr>
<td colspan="5">
<br />
<table width="600px" id="emailList">
<tr>
<td style="background-color:#fff; color:#00468C; border-bottom:1px solid #000;">Email</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="result"></input>
</td>
</tr>
</table>
JavaScript
arrEmails = [];
newRow = arrEmails.lenght;
currentRow = -1;
function UpdateList() {
var rowID = newRow;
if (currentRow>0) {
saveEdits();
alert('Editing current item');
} else {
alert("Add new item");
var newVal = $("#email").val();
arrEmails.push(newVal);
alert(arrEmails.length + ";" + newVal);
var sHtml = "<tr id='row"+rowID+"'>" +
"<td id=\"id" + rowID + "\">" + newVal + "</td>" +
"<td><button onclick='editRow(" + rowID + ")'>Edit</button> " +
"<button onclick='deleteRow(" + rowID + ")'>Delete</button>" +
"</tr>";
$("#emailList").append(sHtml);
newRow++;
$("#email").val("");
buildE();
}
}
function editRow(rowID) {
$('#email').val( $('#id'+rowID).html() );
currentRow = rowID;
}
function saveEdits()
{
var newValue = $('#email').val();
arrEmails[currentRow] = newValue;
$('#id'+currentRow).html( $('#email').val() );
$("#email").val("");
currentRow = -1;
buildE(arrEmails);
}
function deleteRow(rowID)
{
alert(rowID);
$('#row'+rowID).remove();
arrEmails.splice(arrEmails.inArray(),1);
buildE(arrEmails);
}
function buildE()
{
var t = "";
$.each(arrEmails, function(index, value)
{
t += value + ";";
});
alert(t);
$("#result").val(t);
}