JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="north"> <span class="label"><strong>North Island</strong></span>

    <li><a href="#" id="map1" class="northland">Northland</a>

    </li>
    <li><a href="#" id="map2" class="aukland">Auckland</a>

    </li>
    <li> <a href="#" id="map3" class="waikato">Waikato</a>

    </li>
    <li><a href="#" id="map4" class="bayofplenty">Bay of Plenty</a>

    </li>
    <li><a href="#" id="map5" class="gisborne">Gisborne & Hawkes Bay</a>

    </li>
    <li><a href="#" id="map6" class="taranaki">Taranaki</a>

    </li>
    <li><a href="#" id="map7" class="manawatu">Manawatu & Wanganui</a>

    </li>
    <li><a href="#" id="map8" class="wellington">Wellington</a>

    </li>
</ul>
<select name="select2" id="select2">
    <option value="northland">Northland Stockist</option>
    <option value="aukland" >Aukland Stockist</option>
    <option value="waikato">waikato Stockist</option>
    <option value="bayofplenty">Bay of Plenty Stockist</option>
    <option value="gisborne">Gisborne & Hawkes Bay Stockist</option>
    <option value="taranaki">Taranaki Stockist</option>
    <option value="manawatu">Manawatu & Wanganui Stockist</option>
    <option value="wellington">Wellington Stockist</option>
    <option value="nelson">Nelson & Marlborough Stockist</option>
    <option value="westcost">west coast Stockist</option>
    <option value="canterbuty">canterbury Stockist</option>
    <option value="otago">otago & Sounthland Stockist</option>
</select>

CSS

.unique-item-1 {
    color:red;
}
.unique-item-2 {
    color:pink;
}
.unique-item-3 {
    color:green;
}
.unique-item-4 {
    color:black;
}
.unique-item-5 {
    color:wheat;
}

JavaScript

$("ul.north li a").click(function (e) {
    e.preventDefault();
    $("#select2").val($(this).attr("class"));
    
    var options = $("#select2 option");
    var activeClass = $(this).attr("class");
    
    options.each(function(i,e){
     
        var t = $(this);
        
        if(t.val() == activeClass){
         
            t.show();
        }else{
             t.hide();   
        }
        
    })
    
});