I am having an issue with the following code snippet. The idea is to generate another category when I click the Add Category button, thus a new box blue appears with an initial row of checkboxes labelled with Section 1 inside the red box. Inside that box, if I click the button Add Section, it adds another row of checkboxes and so on. Thus, the Section labels in the red box increments as from 1 and onwards inside a particular blue box. The issue is that when I hit add section in another blue box, the label does not increment accordingly. Also, how can I trigger the Save button to get the values of the checked checkboxes and the input field separately for each blue box ?
Please help, I'm totally stuck with this. Thanks.
var categoryCount = 1;
$('.js-add-category').click(function() {
categoryCount++;
var categoryContent = `<div class="serv-content">
<div class="title-content">
<input type="text" id="name-title-`+categoryCount+`" class="name-title" value="name-`+categoryCount+`">
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-2">
<label for="car-1"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-2">
<label for="car-2"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-2">
<label for="car-3"><i class="icon-tick"></i></label>
</li>
</ul>
<div class="footer">
<span class="num"> Section 1 </span>
</div>
</div>
<div class="action-btn">
<button type="button" class="js-add-section">Add Section</button>
<button type="button" class="js-save-section">Save</button>
</div>
</div>
<br>`
$('.main-content').append(categoryContent);
});
var count = 1;
$(document.body).on('click', 'button.js-add-section', function() {
count++;
var sectionContent = `<div class="cars-item js-cars-item-sub-items">
<ul>
<li>
<input type="checkbox" id="car-1-2">
<label for="car-1-2"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-2">
<label for="car-2-2"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-2">
<label for="car-3-2"><i class="icon-tick"></i></label>
</li>
</ul>
<div class="footer">
<span class="num"> Section`+count+` </span>
</div>
</div>`
$(this).closest('.serv-content').append(sectionContent);
});
$(document.body).on('click', 'button.js-save-section', function() {
// get selected checkboxes's values
});
$(".main-content").on('change', '.js-cars-item-sub-items [type="checkbox"]', 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
$(this).closest('.serv-content').find('.js-cars-item-sub-items').each(function () {
$(this).find('li:eq(' + idx + ') [type="checkbox"]').not(obj).prop("checked", false);
});
var checkeds = [];
$(this).closest(".serv-content").find(".js-cars-item-sub-items input:checkbox:checked").each(function (index) {
checkeds[index] = $(this).attr('id');
});
console.clear();
console.log("These are checked:", checkeds);
});.cars-item {
box-sizing: content-box;
width: auto;
height: auto;
padding: 10px;
border: 3px solid red;
}
ul {
/* Added to fully show console in snippet */
margin: 2px;
}
li {
display: inline;
}
.serv-content {
box-sizing: content-box;
width: 250px;
height: auto;
padding: 10px;
border: 5px solid blue;
}
.cars.saved {
border-color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="js-add-category">Add Category</button> <br> <br>
<div class="main-content">
<div class="serv-content">
<div class="title-content">
<input type="text" id="name-title-1" class="name-title" value="name-1">
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1">
<label for="car-1"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2">
<label for="car-2"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3">
<label for="car-3"><i class="icon-tick"></i></label>
</li>
</ul>
<div class="footer">
<span class="num"> Section 1 </span>
</div>
</div>
<div class="action-btn">
<button type="button" class="js-add-section">Add Section</button>
<button type="button" class="js-save-section">Save</button>
</div>
</div>
<br>
</div>
<br>
