JSFiddle - React, Tailwind, and code Playground

HTML

<div align="center"><br>
    <input type="radio" name="grp1" value="12"> Monthly
    
    <input type="radio" name="grp1" value="3"> Quarterly
    
    <input type="radio" name="grp1" value="1" checked> Annual
    <input type="radio" name="grp1" value="6"> Half Yearly
</div>

<br>

<table id ="dates" class="table1">
<tbody>    
    <tr>
        <th>Installment No.</th>
        <th>Date</th>
    </tr>    
</tbody>
    
</table>

CSS

.table1 
{ 
    margin: 1em; 
    border-collapse: collapse; 
    
}

.table1 th 
{ 
    padding: .5em; 
    border: 1px #ccc solid;
    background-color:#4F4F4F;
    color:white;
} 

.table1 td
 { 
     padding: .5em; 
     border: 1px #ccc solid;
     background-color:#FFF7C0;
     color:#000000;
 }

JavaScript

$(document).ready(function(){
    $('input:radio').change(function(){
        //alert('hi');
        // Add no of rows equal to selected item's value (installment No = Loop counter value), date=current date+selected value months
        $('#dates > tbody:last').append('<tr><td>1</td> <td><lable id="id+counter">23/02/2011</label></td>  <tr>');
        
    }); 
});