Losing selection when using multiple rating components

Hi metronic staff

I'm using multiple rating components in 1 form

the issue I face is that when I select an option from the Rating Component 2 I lose the selection of the Rating Component 1

what should I do to preserve the check on Rating 1 component when checking an option of the Rating 2 component?

here is the code I'm using >>


<div id="rating_sel1" class="fv-row mb-10">
<label class="stepper-title" >Lorem ipsum dolor sit amet, consectetur adipiscing elit</label>
<div class="rating">
<input class="rating-input" name="rating1" value="0" checked type="radio" id="rating_1_opt0" />
<!--begin::Star 1-->
<div>
<a onclick="chkRating(1, 1)" id="rating_1_opt1_btn" href="#" class="btn btn-light-warning font-weight-bold mr-2"
style="display: flex; align-items: center; justify-content: center;
width:20px; text-align: center; cursor:pointer;">1
</a>
<input class="rating-input" name="rating1" value="1" type="radio" id="rating_1_opt1" />
</div>
<!--end::Star 1-->
<!--begin::Star 2-->
<div>
<a onclick="chkRating(1, 2)" id="rating_1_opt2_btn" href="#" class="btn btn-light-warning font-weight-bold mr-2"
style="display: flex; align-items: center; justify-content: center;
width:20px; text-align: center; cursor:pointer;">
<label >2</label>
</a>
<input class="rating-input" name="rating1" value="2" type="radio" id="rating_1_opt2" />
</div>
<!--end::Star 2-->
<!--begin::Star 3-->
<div>
<a onclick="chkRating(1, 3)" id="rating_1_opt3_btn" href="#" class="btn btn-light-warning font-weight-bold mr-2"
style="display: flex; align-items: center; justify-content: center;
width:20px; text-align: center; cursor:pointer;">
<label >3</label>
</a>
<input class="rating-input" name="rating1" value="3" type="radio" id="rating_1_opt3" />
</div>
<!--end::Star 3-->
<!--begin::Star 4-->
<div>
<a onclick="chkRating(1, 4)" id="rating_1_opt4_btn" href="#" class="btn btn-light-warning font-weight-bold mr-2"
style="display: flex; align-items: center; justify-content: center;
width:20px; text-align: center; cursor:pointer;">
<label >4</label>
</a>
<input class="rating-input" name="rating1" value="4" type="radio" id="rating_1_opt4" />
</div>
<!--end::Star 4-->
<!--begin::Star 5-->
<div>
<a onclick="chkRating(1, 5)" id="rating_1_opt5_btn" href="#" class="btn btn-light-warning font-weight-bold mr-2"
style="display: flex; align-items: center; justify-content: center;
width:20px; text-align: center; cursor:pointer;">
<label >5</label>
</a>
<input class="rating-input" name="rating1" value="5" type="radio" id="rating_1_opt5" />
</div>
<!--end::Star 5-->
</div>
</div>


<div id="rating_sel2" class="fv-row mb-10">
<label class="stepper-title" >Donec porttitor sed libero et semper. Nulla non iaculis augue</label>
<div class="rating">
<input class="rating-input" name="rating2" value="0" checked type="radio" id="rating_2_opt0" />
<!--begin::Star 1-->
<div>
<a onclick="chkRating(2, 1)" id="rating_2_opt1_btn" href="#" class="btn btn-light-warning font-weight-bold mr-2"
style="display: flex; align-items: center; justify-content: center;
width:20px; text-align: center; cursor:pointer;">
<label >1</label>
</a>
<input class="rating-input" name="rating2" value="1" type="radio" id="rating_2_opt1" />
</div>
<!--end::Star 1-->
<!--begin::Star 2-->
<div>
<a onclick="chkRating(2, 2)" id="rating_2_opt2_btn" href="#" class="btn btn-light-warning font-weight-bold mr-2"
style="display: flex; align-items: center; justify-content: center;
width:20px; text-align: center; cursor:pointer;">
<label >2</label>
</a>
<input class="rating-input" name="rating2" value="2" type="radio" id="rating_2_opt2" />
</div>
<!--end::Star 2-->
<!--begin::Star 3-->
<div>
<a onclick="chkRating(2, 3)" id="rating_2_opt3_btn" href="#" class="btn btn-light-warning font-weight-bold mr-2"
style="display: flex; align-items: center; justify-content: center;
width:20px; text-align: center; cursor:pointer;">
<label >3</label>
</a>
<input class="rating-input" name="rating2" value="3" type="radio" id="rating_2_opt3" />
</div>
<!--end::Star 3-->
<!--begin::Star 4-->
<div>
<a onclick="chkRating(2, 4)" id="rating_2_opt4_btn" href="#" class="btn btn-light-warning font-weight-bold mr-2"
style="display: flex; align-items: center; justify-content: center;
width:20px; text-align: center; cursor:pointer;">
<label >4</label>
</a>
<input class="rating-input" name="rating2" value="4" type="radio" id="rating_2_opt4" />
</div>
<!--end::Star 4-->
<!--begin::Star 5-->
<div>
<a onclick="chkRating(2, 5)" id="rating_2_opt5_btn" href="#" class="btn btn-light-warning font-weight-bold mr-2"
style="display: flex; align-items: center; justify-content: center;
width:20px; text-align: center; cursor:pointer;">
<label >5</label>
</a>
<input class="rating-input" name="rating2" value="5" type="radio" id="rating_2_opt5" />
</div>
<!--end::Star 5-->
</div>
</div>