Issue in functioning of radio input in dynamically adding row through jQuery

A new row is dynamically creating on clicking “add Row” button through function in jQuery.
But when I select radio input in new row then selected value of previous radio input is removing.
Please run and see the codes as below:
enter image description here

function add_row(table_row_count)
{
    $("#add-row_"+table_row_count).hide();
    $("#delete-row_"+table_row_count).hide();
    
    var table_row_count = parseInt(table_row_count);
    
    table_row_count += 1;
    
    var markup = 
    '<tr id="tbl_row_'+table_row_count+'" >'+
    '<td><label>'+table_row_count+'</label></td>'+
    '<td>'+
          '<label>Value in Range? :</label>'+ 
          '<input type="radio" name="option" id="option_1_row_'+table_row_count+'" value="1"  > YES'+ 
          '<input type="radio" name="option" id="option_2_row_'+table_row_count+'" value="2"  > NO'+                      
    '</td>'+
    '<td id="capacity_from_row_'+table_row_count+'" >'+
            '<label>Range From :</label><br>'+
            '<input type="text" name="capacity_from[]" id="capacity_from_'+table_row_count+'"  />'+                        
    '</td>'+
    '<td>'+
            '<label id="lbl_capacity_range_'+table_row_count+'" >Range Upto :</label><br>'+
            '<input type="text" name="capacity_upto[]" id="capacity_upto_'+table_row_count+'" />'+              
     '</td>'+             
    '<td class="align-middle"><a href="javascript:void(0)" class="text-success add-row" id="add-row_'+table_row_count+'"  onClick="add_row(''+table_row_count+'');" ><i class="fa fa-plus fa-lg text-success" aria-hidden="true"></i> Add Row</a></td>'+
    '<td class="align-middle"><a href="javascript:void(0)" class="text-danger delete-row" id="delete-row_'+table_row_count+'" onClick="delete_row(''+table_row_count+'');" ><i class="fa fa-trash fa-lg text-danger" aria-hidden="true"></i> Delete Row</a></td>'+
    '</tr>';
    
    var table = $("#tbl_details tbody");
    table.append(markup);
    
     
}


function delete_row(table_row_count)
{
    var r = confirm("Are you sure to delete row");
    if(r == false){
        return;
    }
    
    var table_row_count = parseInt(table_row_count);
    var previous_row = table_row_count - 1;
    $("#add-row_"+previous_row).show();
    if(previous_row != 1){
        $("#delete-row_"+previous_row).show();
    }
    
    $("#tbl_row_"+table_row_count).remove();
            
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="add.js"></script>
</head>
<body>
        <h3>Enter Details</h3>
        <table class="table table-striped" id="tbl_details">    
        <tbody>     
        <tr id="row_1">
        <td>1.</td>
        <td>
          <label>Value in Range? :</label> 
          <input type="radio" name="option" id="option_1_row_1" value="1" checked="checked" > YES  
          <input type="radio" name="option" id="option_2_row_1" value="2" > NO       
        </td>
        <td id="capacity_from_row_1" >
            <label>Range From :</label><br>
            <input type="text" name="capacity_from[]" id="capacity_from_1" />        
        </td>
        <td>
            <label id="lbl_capacity_range_1" >Range Upto :</label><br>
            <input type="text" name="capacity_upto[]" id="capacity_upto_1" />                   
        </td>   
        <td class="align-middle"><a href="javascript:void(0)" class="text-success add-row" id="add-row_1" onClick="add_row(1);" ><i class="fa fa-plus fa-lg text-success" aria-hidden="true"></i> Add Row</a></td>
        <td class="align-middle"></td>
        </tr>
        </tbody>
        </table>
</body>
</html>

How to solve the issue. kindly help me.
Thanks in advance.