JSFiddle - React, Tailwind, and code Playground

HTML

Apple
<input type="radio" onclick="createArray()" id="one" name="apple" data-price="10" value="light"/> Light
<input type="radio" onclick="createArray()" id="two" name="apple" data-price="20" value="dark" /> Dark
<input type="text" id="appleqty" name="appleqty" value="" />
<br>
Mango
<input type="radio" onclick="createArray()" id="three" name="Mango" data-price="30" value="light"/> Light
<input type="radio" onclick="createArray()" id="one" name="Mango" data-price="40" value="dark" /> Dark
<input type="text" id="Mangoqty" name="Mangoqty" value="" />
<br>
Pine Apple
<input type="radio" onclick="createArray()" id="four" name="Pineapple" data-price="50" value="light"/> Light
<input type="radio" onclick="createArray()" id="five" name="Pineapple" data-price="60" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />
<br>
Grape
<input type="radio" onclick="createArray()" id="six" name="Grape" data-price="70" value="light"/> Light
<input type="radio" onclick="createArray()" id="seven" name="Grape" data-price="80" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />

<textarea id="a" cols="50"></textarea>

JavaScript

function createArray() {
    
    var myArr = new Array();
    myArr[0] = createSubArray('apple');
    myArr[1] = createSubArray('Mango');
    myArr[2] = createSubArray('Pineapple');
    myArr[3] = createSubArray('Grape');
    document.getElementById("a").innerHTML = JSON.stringify(myArr);
    return myArr;
   
}
   
 
function createSubArray(name){
    var arr = new Array();
    elems = document.getElementsByName(name);
    for (var i=0;i<elems.length;i++){
        if (elems[i].checked){
            arr[name] =  elems[i].value;
            arr['price'] =  elems[i].getAttribute('data-price');
        }
    }
    return arr;
    
}