JSFiddle - React, Tailwind, and code Playground

HTML

<form>
     <div id="inputtitle">Title</div>
    <div id="inputremarks">remarks</div>
    <div id="inputdate">Date</div>
   <div id="inputoption">Option</div>
<input type="submit" />
</form>
    <br>
<hr>
<table border="1" id="dtable">
    <tr><th>Name</th><th>Remarks</th><th>Date</th><th>Option</th></tr>
<tbody>
    </tbody>
</table>

CSS

table tbody tr:hover {
    background-color: orange;
    cursor: pointer;
}

JavaScript

$(document).ready(function(){
     
     $("#inputtitle").append("<input type='text'  name='type1' placeholder='Title'/><br>");
    $("#inputremarks").append("<input type='text'  name='type2' placeholder='Remarks'/><br>");
      $("#inputdate").append("<input type='text'  name='type3' placeholder='Date'/><br>");
      $("#inputoption").append("<input type='text'  name='type4' placeholder='Option'/><br>");
   
    });

$('form').submit(function(e){
    e.preventDefault();
          
        var newName = $('form').find('input[name="type1"]').val();
       var newName1 = $('form').find('input[name="type2"]').val();
        var newName2 = $('form').find('input[name="type3"]').val();
         var newName3 = $('form').find('input[name="type4"]').val();
    $('table').append('<tr><td>' + newName + '</td><td>' + newName1 + '</td><td>' + newName2 + '</td><td>' + newName3 + '</td></tr>'  );
    
   $('table tbody tr').click(function(){
   var Name = $(this).find("td:nth-child(1)").html();
   var Remarks = $(this).find("td:nth-child(2)").html();
   var Date = $(this).find("td:nth-child(3)").html();
   var Option = $(this).find("td:nth-child(4)").html();
   $("#inputtitle").html("Title<input type='text'  value='" + Name + "'><br>");
       $("#inputremarks").html("remarks<input type='text'  value='" + Remarks + "'/><br>");
      $("#inputdate").html("Date<input type='text'  value='" + Date + "'/><br>");
      $("#inputoption").html("Option<input type='text'  value='" + Option + "'/><br>");
    }); 
    });