JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<thead>
<tr>
<th><input type="checkbox" name="checklist-list" class="checkbox-box"></th>
<th>Item</th>
</tr>
</thead>
<tbody>
<tr>
<td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td>
<td class="item-td"><input class="input-item" type="text" value="Artificial"></td>
</tr>
<tr>
<td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td>
<td class="item-td"><input class="input-item" type="text" value="Broken"></td>
</tr>
<tr>
<td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td>
<td class="item-td"><input class="input-item" type="text" value="Casual"></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
JavaScript
$( document ).ready(function() {
$("tbody").on("keydown", "tr input", function(){
keyDownLocation = this.selectionStart;
});
$("tbody").on("keyup", "tr input", function(e){
if (e.key === "Enter") {
var tempSelect = this.value.substr(this.selectionStart);
this.value = this.value.substr(0, this.selectionStart);
$(this).parent().parent().after('<tr><td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td><td class="item-td"><input class="input-item" type="text" value="' + tempSelect + '"></td></tr>');
$(this).parent().parent().next().find(".input-item").focus();
}
});
$("tbody").on("click", "tr input", function(){
console.log($(this));
console.log($(this).parent().parent().parent()[0].childNodes);
});
});