Radio button is not maintaining Selected option

Question

Can you please help with below query. We have a button on LWC page, on click of button we are showing a form to create a record. If user clicks multiple times on the button, multiple forms will appear. Records are getting saved on backend which we are doing by another button Save.

Problem : When ever user clicks on Create a record button, default value for radio button is No. User can change the value to Yes or No. Whenever user clicks again on button to add another record, radio button is not able to maintain the earlier selected value. We are able to save value selected to database but value is getting wiped out from front end.

<template>
    <lightning-record-edit-form
            record-id={recordId}
            object-api-name={objectApiName}
            onsuccess={handleSuccess}>
        <lightning-button label="Neutral" title="Create a record" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
        <template if:true = {showform}>
        <template for:each = {listofRecords} for:item = "r1" for:index="index">
        <div class="slds-border_bottom slds-p-bottom_small" key={item.id}>
            <h3> Enter Details </h3>
                    <lightning-input-field field-name="name_field__c" data-id="name_field__c"></lightning-input-field>
                    <lightning-input-field field-name="Phone_field__c" data-id="Phone_field__c"></lightning-input-field>
                <div class="slds-form-element_row">
                <lightning-radio-group name="radioGroup"
                            label="Radio Group"
                            options={radiooptions}
                            value={radiovalue}
                            type="radio"
                onchange={handleChange}
                data-index={index}></lightning-radio-group>
            </div>
        </template>
        </template>
    </lightning-record-edit-form>
</template>

import { LightningElement, api } from 'lwc';

export default class LwcRecordViewForm extends LightningElement {
   showform = false; 
    radiovalue = 'No';
   handleclick(event){
       showform = true;
   }
   handleChange(event){
       let fieldName = event.target.name;
       let fieldval = event.target.value;
       var rowIndex = event.currentTarget.dataset.index; 
       this.items[rowIndex].backendfield__c = fieldval;
   }
}

Answer 1

You only have one variable shared across all rows. That means that every option list will use the value of whatever is set last. Instead, you need to make the variable an element of each array item, like this:

<lightning-radio-group name="radioGroup"
            label="Radio Group"
            options={radiooptions}
            value={item.radiovalue}
            type="radio"
onchange={handleChange}
data-index={index}></lightning-radio-group>

Further, since radio groups are grouped by their name, you need to disambiguate them somehow, such as created a unique name for each group:

<lightning-radio-group name={item.radioGroupName}
            label="Radio Group"
            options={radiooptions}
            value={item.radiovalue}
            type="radio"
onchange={handleChange}
data-index={index}></lightning-radio-group>