JSFiddle - React, Tailwind, and code Playground

by alfannas

HTML

<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>
<table id="myTable">
<tr><td>Email</td><td><input type="text" /></td></tr>
</table>

<p>Click the button to copy an item from one list to another.</p>

<button onclick="myFunction()">Try it</button>

JavaScript

function myFunction() {
    var itm = document.getElementById("myList2").lastChild;
    var cln = itm.cloneNode(true);
    //document.getElementById("myList1").appendChild(cln);
    
    var inpt = document.getElementsByTagName("table")[0].lastChild;
    var clon = inpt.cloneNode(true);
    //var inp = '<tr><td>Email</td><td><input type="text" /></td></tr>';
    document.getElementsByTagName("table")[0].appendChild(clon);
    var x = inpt.getElementsByTagName("td").length;
    var y = inpt.getElementsByTagName("td")[x-1];
    var z = y.getElementsByTagName("input")[0].value;
    y.getElementsByTagName("input")[0].value = "hello";
    var i = clon.value;
    document.getElementsByTagName("p")[0].innerHTML = "value "+i;
}