How to using jquery child() method to adding class in many elements? -

i have written function mark , control div elements red border. controlled select option element. options kotak1,kotak2,etc. when choose kotak1 associated div border become red. how restore div element black border again when change other option?

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> 

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

$(document).ready(function () {     set_pasar_option(); });  function set_pasar_option() {     (i = 1; < 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"); } 

fiddle

just add line in aktif_kotak() function:

$(kotak_aktif).siblings().removeclass("kotak-aktif"); 

like in last.

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

demo