JSFiddle - React, Tailwind, and code Playground

HTML

<select id="myList">
    <option value="one">Default</option>
    <option value="one">Theme 1</option>
    <option value="two">Theme 2</option>
</select>
<div id="x"></div>

JavaScript

function list() {
    document.getElementById("myList").onchange = function () {
        var sheet = document.getElementById("myList").value;

        var testPosition = {
            coords: {
                longitude: 1,
                latitude: 1
            }
        }

        if (sheet == "one") {
            showPosition(testPosition);
        } else if (sheet == "two") {
            showPosition2();
        } else if (sheet = "three") {} else {}
        return false
    };
}
window.onload = list();

function showPosition(position) {
    var locations = [
        ['store1', -2.063150, 52.516503, 4],
        ['store2', -2.064824, 52.518436, 5],
        ['store3', -2.068214, 52.519898, 3],
        ['store4', -2.068558, 52.512769, 2],
        ['store5', -2.070875, 52.510758, 1]
    ];

    var lon1 = position.coords.longitude * 0.0174532925;
    var lat1 = position.coords.latitude * 0.0174532925;
    var i = 0;

    var x = document.getElementById("x");
    while (i < locations.length) {
        x.innerHTML += "<br>Distance " + calcDist(lon1, lat1, locations[i][1] * 0.0174532925, locations[i][2] * 0.0174532925);
        i++;
    }
}

function calcDist(lon1, lat1, lon2, lat2) {
    return Math.acos(Math.sin(lat1) * Math.sin(lat2) + Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1)) * 3958;
}