JSFiddle - React, Tailwind, and code Playground

HTML

<div id="group-select">
    <select id="select_kotak">
        <option selected>Pilih Kotak</option>
    </select>
</div>
<br>
<div id="group-kotak">
    <div class="kotak-nonaktif">Kotak1</div>
    <div class="kotak-nonaktif">Kotak2</div>
    <div class="kotak-nonaktif">Kotak3</div>
    <div class="kotak-nonaktif">Kotak4</div>
</div>

CSS

.kotak-nonaktif {
    height:100px;
    width:100px;
    border:1px solid black;
    float:left;
    margin-left:1px;
}
.kotak-nonaktif.kotak-aktif {
    border:3px solid red;
}

JavaScript

$(document).ready(function () {
    set_pasar_option();
    
    var divs = $('.kotak-nonaktif');
    
    $('#select_kotak').on('change', function() {
        var selectedVal = $(this).children('option:selected').text();
        divs.removeClass('kotak-aktif');
        var filtered = divs.filter(function() {
            return $(this).text() == selectedVal;
        });
        
        filtered.addClass('kotak-aktif');
    });
});

function set_pasar_option() {
    for (i = 1; i < 5; i++) {
        var option = document.createElement("option");
        option.text = "Kotak" + i;
        option.value = "value" + i;
        option.id = "id" + i;
        var select = document.getElementById("select_kotak");
        select.appendChild(option);
        option.addEventListener('click', function () {
            aktif_kotak(this.id);
        });
    }
}

function non_aktif_kotak() {
    var allkotak = document.getElementById('groupkotak').children();
    $(allkotak).addClass("kotak-nonaktif");
}

function aktif_kotak(id) {
    //non_aktif_kotak(); 
    id = id.substr(2, 4);
    id = parseInt(id) - 1;
    var kotak_aktif = document.getElementById('group-kotak').children[id];
    $(kotak_aktif).addClass("kotak-aktif");
}