JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btn">pew</button>
<ul id="target">
  <li>foo</li>
</ul>


<ul id="template">
  <li>bar <input type="text"></li>
</ul>

CSS

#template {
  display: none;
}

JavaScript

$('#btn').on('click', function(){
  let newElem = $('#template li').clone(true, true)
  let randomText = randomString(10)
  newElem.find('input').val(randomText)
  console.log(newElem)
	$('#target').append(newElem)
})


















function randomString(len) {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for (var i = 0; i < len; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  return text;
}