JSFiddle - React, Tailwind, and code Playground

HTML

<form id="QandA" action="insertQuestion.php" method="post" enctype="multipart/form-data">

<table id="replies">
<tr>
     <th colspan="2">
     Replies
     </th>
</tr>
<tr>
<td>Number of Replies: </td>
<td align="left"><input type="radio" name="reply" value="single" class="replyBtn" /> Single<br />
<input type="radio" name="reply" value="multiple" class="replyBtn" /> Multiple</td>
</tr>
</table>    
  
<table id="questionBtn" align="center">
<tr>
<th>
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" />
</th>
</tr>
</table>
    
<hr/>

<div id="details">
<table id="qandatbl" align="center">
<thead>
<tr>
<th class="noofreplies">Number of Replies</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>


</form>

CSS

#qandatbl{
    border:1px black solid;
    border-collapse:collapse;
}

#qandatbl td { 
    vertical-align: middle;
}
     
#qandatbl th{
    border:1px black solid;
    border-collapse:collapse;
    text-align:center;
}

#addQuestionBtn{
    font-weight:bold;
    font-size:14px;
    height:30px;
    width:150px;    
    cursor:pointer;
}

#replies{
    display:inline-block;
    vertical-align:top;
}

#replies th{
    border-collapse:collapse;
    border:1px solid black;    
}

#replies td{
    border-collapse:collapse;
    border:1px solid black;    
}

.replyBtn{
    cursor:pointer;
}
    
.replyBtnRow{
    cursor:pointer;
}

.noofreplies{
    width: 120px;
    border:1px black solid;
    border-collapse:collapse;
}

.wrapper{
    text-align:left;
    display: inline-block;
}

JavaScript

var count = 1;
      
function insertQuestion(form) {   
    

    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $replies = $("<td class='noofreplies'><div class='wrapper'></div></td>");
    
  var $btnReply = "<input type='radio' name='reply//[//"+count+"]' value='single' class='replyBtnRow' /> Single<br /><input type='radio' name='reply//[//"+count+"]' value='multiple' class='replyBtnRow' /> Multiple";

    $replies.children().append($btnReply);

    if($("input[name=reply]:checked").length){
        
        $replies.find('input[name="reply['+count+']"]').eq($("input[name=reply]:checked").val() == "single"?0:1).prop("checked", true);
   
}
    
    $tr.append($replies);   
    $tbody.append($tr);    
    
    count++;

                        
}