JSFiddle - React, Tailwind, and code Playground

HTML

<p onclick='myfunction("myThing1")'> Click this text for input box  below </p>

    <b id='myThing1'>input box appears .. ta daa</b>

  <p onclick='myfunction("myThing2")'> Click this new text for input box below </p>

 <div id='myThing2'> but no input box appears here, the line above must turn this text into a  textbox, but it doesn't because of similar id, how do i fix the id problem without defining a new id over and over?</div>

<script>
function myfunction(id){
 document.getElementById(id).innerHTML='<input type="text"/>';
 }
 </script>