Javascript 通过jquery向自动生成的div添加和删除类？

我有一组js自动生成的div。 我需要通过jquery应用一些CSS规则，因此如果单击其中一个，另一个将被停用，再次单击另一个将返回激活状态

我知道CSS属性，并且我已经为不同的模式准备了一些类，但是我需要知道的是，对于使用串行ID自动生成的div，我该如何做到这一点

<div class="row">
 <div id="1_1" class="avilable"> box 01 </div>
 <div id="1_2" class="avilable"> box 01 </div>
 <div id="1_3" class="avilable"> box 01 </div>
 <div id="1_4" class="avilable"> box 01 </div>
</div>
<div class="row">
 <div id="2_1" class="avilable"> box 01 </div>
 <div id="2_2" class="avilable"> box 01 </div>
 <div id="2_3" class="avilable"> box 01 </div>
 <div id="2_4" class="avilable"> box 01 </div>
</div>
<div class="row">
 <div id="3_1" class="avilable"> box 01 </div>
 <div id="3_2" class="avilable"> box 01 </div>
 <div id="3_3" class="avilable"> box 01 </div>
 <div id="3_4" class="avilable"> box 01 </div>
</div>

方框01
方框01
方框01
方框01
方框01
方框01
方框01
方框01
方框01
方框01
方框01
方框01

使用以下jquery代码：-

$("body").on("click","div.avilable",function(){
    $("div.avilable").removeClass("test-remove");
    $(this).addClass("test-add");
})

---

您可以使用-Jquery

$("body").on("click","div.avilable",function(){
    $("div.avilable").removeClass("active");
$(this).addClass("active");

})

以下是JSFIDLE链接：

$("div.avilable").on("click",function(){
    $(this).toggleClass("active");
});