I'm have having a bit of trouble setting up a dynamic google sheet to fetch data. If the option value goes after 10, it will not work; the code returns the value as a separate 1 then 0. And so on, value 11 would be 1 and 1.

Any help would be awesome and thank you so so much!

<select name="examples" id="selectEvents" class="my-events">
    <option value="" placeholder="select" selected>Select</option>
</select>

<h2 class="event-name" ></h2>
<h3 class="event-info" ></h3>
<script>
    //variables for spreadsheet

    const eventName = document.querySelector('.event-name');
    const eventInfo = document.querySelector('.event-info');

    //variables for sheet
    const sheetId = '1wJp22oIlG29X6FDszaPoh71IvbwrZYoWRqwwYy9gbQg';
    const base = `https://docs.google.com/spreadsheets/d/${sheetId}/gviz/tq?`;
    const sheetName = 'sheet1';
    const query = encodeURIComponent('Select *');
    const url = `${base}&sheet=${sheetName}&tq=${query}`;

    fetch(url)
        .then(res => res.text())
        .then(rep => {
            //Remove additional text and extract only JSON:
            const jsonData = JSON.parse(rep.substring(47).slice(0, -2));

            const dataRows = jsonData.table.rows;
            const select = document.getElementById('selectEvents');

            for (const r of dataRows) {
                select.options[select.options.length] = new Option(r.c[1].v, Number(select.options.length + 1));
            }

            const selectElement = document.querySelector('.my-events');

            selectElement.addEventListener('change', event => {
                for (let i of Object.values(selectEvents.value)) {
                    if (selectEvents.value === i) {
                        eventName.textContent = jsonData.table.rows[i - 2].c[1].v;
                        eventInfo.textContent = jsonData.table.rows[i - 2].c[2].v;
                    }
                }
            });
        });
</script>