JSFiddle - React, Tailwind, and code Playground

HTML

<style>
	.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;
	}
	</style>

<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>

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");	
    $(kotak_aktif).siblings().removeClass("kotak-aktif");	
}