How to export javascript array to MySQL database

Question

I'm having an array in JavaScript to show as a selector in my web page.

Now I want to export this array to MySQL database and make the selector in my web page editable from user interface.

I'm having trouble in saving the array in the database.

Most of the post I saw is using php, I only need to get done this using javascript and sql.

const SEIKO = "seiko";
const WSL = "wsl";


const DATAFEED = SEIKO;


const SEIKO_EVENTS = [
    { "id": "117", "description": "117: High Jump Women U.20 Final" },
    { "id": "128", "description": "128: Javelin Throw Men U.20 Final" },
    { "id": "402", "description": "402: 100m Men Open Decathlon 1" },
    { "id": "104", "description": "104: Discus Throw Men U.20 Final" },
    { "id": "105", "description": "105: 100m Women Open S/Final" },
    { "id": "106", "description": "106: 100m Women U.20 S/Final" },
    { "id": "107", "description": "107: 100m Men U.20 S/Final" },
    { "id": "108", "description": "108: 100m Men Open S/Final" }
  
];



//list of event codes to use for the WSL XML data feed
const WSL_EVENTS = [
    { "id": "051", "description": "051: Men's Shot Put Final" },
    { "id": "052", "description": "052: Men's Discus Throw Final" },
    { "id": "053", "description": "053: Men's Javelin Throw Final" },
    { "id": "054", "description": "054: Men's Hammer Throw Final" },
    { "id": "061", "description": "061: Men's Long Jump Final" },
    { "id": "062", "description": "062: Men's Triple Jump Final" },
    { "id": "071", "description": "071: Men's High Jump Final" },
    { "id": "072", "description": "072: Men's Pole Vault Final" },
    { "id": "961", "description": "961: Men's Long Jump Decathlon" },
    { "id": "951", "description": "951: Men's Shot Put Decathlon" },
    { "id": "971", "description": "971: Men's High Jump Decathlon" }
   
];

function eventCodes() {
    //get the list of event codes based on the data feed
    if (DATAFEED === SEIKO) {
        return SEIKO_EVENTS;
    } else {
        return WSL_EVENTS;
    }

    var req = new XMLHttpRequest();

    req.addEventListener("load", loadSEIKO_EVENTS);
    req.open("POST", "/getevent/", true);
    req.send();

}


function addOptions(selector) {
    var events = eventCodes();

    //add all the items in the event codes list to the selector
    events.forEach(function(item) {
        var opt = document.createElement("option");

        //value is the event id and will be used to construct the
        //filename of the data feed file.
        opt.value = item.id;
        opt.text = item.description;

        selector.appendChild(opt);
    });
}

function init() {
    //get the selectors
    f1_selector = document.getElementById("f1_selector");
    f2_selector = document.getElementById("f2_selector");
    f3_selector = document.getElementById("f3_selector");

    //populate the selectors with our event IDs and descriptions
    addOptions(f1_selector);
    addOptions(f2_selector);
    addOptions(f3_selector);

    //get the buttons
    f1_refresh = document.getElementById("f1_refresh");
    f2_refresh = document.getElementById("f2_refresh");
    f3_refresh = document.getElementById("f3_refresh");

    //hook the click events   
    f1_selector.onclick = function() { getFile("f1", f1_selector.value); };
    f1_refresh.onclick = function() { getFile("f1", f1_selector.value); };

    f2_selector.onclick = function() { getFile("f2", f2_selector.value); };
    f2_refresh.onclick = function() { getFile("f2", f2_selector.value); };

    f3_selector.onclick = function() { getFile("f3", f3_selector.value); };
    f3_refresh.onclick = function() { getFile("f3", f3_selector.value); };

    //try to get the initial grid
    getFile("f1", f1_selector.value);
    getFile("f2", f2_selector.value);
    getFile("f3", f3_selector.value);

    //connect the WebSocket
    connect();
}

 <div id="f1" class="stats">
            <div class="selector-box">
                <select id="f1_selector" autofocus> <button id="add">Add</button>  
        </select>
                <span id="f1_refresh" style="padding-left: 5px"><button id="f1_button">Force Refresh</button></span>
                <span id="f1_status" style="float: right"></span>
            </div>
            <div>
                <span id="f1_eventstatus">&nbsp;</span>
            </div>
            <div>
                <table id="f1_grid">
                    <tr>
                        <th>Results</th>
                    </tr>
                </table>
            </div>
        </div>