JSFiddle - React, Tailwind, and code Playground

by naveen

HTML

<table border="0"  class="commentbox">
    <tr>
        <td>Some Item text
            <br/>
             <div id="container-88C4B8D2-8F96-4EB5-B42E-08C540D7F171" ></div>
             <input type="button" class='btnReply' id="reply-88C4B8D2-8F96-4EB5-B42E-08C540D7F171" value="Reply" />             
         </td>
     </tr>
      
</table>

CSS

.txtCmnt
{
    padding:4px;
    width:400px;
    height:30px;
}
.commentbox td
{
    background-color:#DAF1FE; padding:4px;
    border-bottom:1px solid green;
}

JavaScript

$(function(){     
      $(".commentbox .btnReply").click(function(){
         //i = 1
        $(this).hide();
         var id = $(this).attr("id").split("-");
                alert(id);
                id.shift();
                alert(id);
                var newString = id.join('-');
                alert(newString);
              
 var strDiv =  "<input type='text' class='txtCmnt' id='txtReply-" + id + "' /> <input type='button' class='btnSave' value='Save' id='btnSave-" + newString + "' /> ";
                $("#container-" + newString).append(strDiv);       
      });
       var i=1;
       $(".commentbox").on("click",".btnSave",function(){
        

             var id = $(this).attr("id").split("-");
                alert(id);
                id.shift();
                alert(id);
                var newString = id.join('-');
                alert(newString);

               
       });       
    });