JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-3">
<label for="car-1-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-3">
<label for="car-2-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-3">
<label for="car-3-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-3">
<label for="car-4-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-3">
<label for="car-5-3"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-4">
<label for="car-1-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-4">
<label for="car-2-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-4">
<label for="car-3-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-4">
<label for="car-4-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-4">
<label for="car-5-4"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-5">
<label for="car-1-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-5">
<label for="car-2-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-5">
<label for="car-3-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-5">
<label for="car-4-5"><i class="icon-tick"></i></label>
</li>
<li>
<input...
CSS
.cars-item {
border-bottom: 1px solid gray;
}
ul {
/* Added to fully show console in snippet */
margin: 2px;
}
li {
display: inline;
}
JavaScript
$('.js-cars-item [type="checkbox"]').change(function() {
var idx = $(this).closest('li').index(); //Get the index - Number in order
var chk = $(this).is(":checked"); //Get if checked or not
var obj = this; //Checkbox object
$('.js-cars-item').each(function() { //Loop every js-cars-item
//Find the checkbox with the same index of clicked checkbox. Change disabled property
$(this).find('li:eq(' + idx + ') [type="checkbox"]').not(obj).prop("checked", false);
});
var checkeds = [];
$(".cars-item input:checkbox:checked").each(function(index) {
checkeds[index] = $(this).attr('id');
});
console.clear();
console.log("These are checked:", checkeds);
})