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">Kotak 1</div>
    <div class="kotak-nonaktif">Kotak 2</div>
    <div class="kotak-nonaktif">Kotak 3</div>
    <div class="kotak-nonaktif">Kotak 4</div>
</div>

CSS

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

JavaScript

$(document).ready(function () {
    set_pasar_option();
});

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");
}