Click event on same button class, but invokes different action in jquery

Question

I am having an issue. I have the code defined here:

$('.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);
})

$('.js-add-category').click(function() {

  var categoryContent = `<div class="cars">

<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>
  </ul>
</div>

<button type="button" class="js-add-section">Add Section</button>
</div> <br>`

  $('.main').append(categoryContent);

});


$(document.body).on('click', 'button.js-add-section', function() {
  var sectionContent = `<div class="cars-item js-cars-item">
  <ul>
    <li>
      <input type="checkbox" id="car-1-6>
      <label for="car-1-6"><i class="icon-tick"></i></label>
    </li>
      <li>
      <input type="checkbox" id="car-2-6>
      <label for="car-2-6"><i class="icon-tick"></i></label>
    </li>
      <li>
      <input type="checkbox" id="car-3-6>
      <label for="car-3-6"><i class="icon-tick"></i></label>
    </li>
  </ul> </div>`

  $('.cars').append(sectionContent);

});

.cars-item {
  border-bottom: 1px solid gray;
}

ul {
  /* Added to fully show console in snippet */
  margin: 2px;
}

li {
  display: inline;
}

.cars {
  box-sizing: content-box;
  width: 250px;
  height: auto;
  padding: 10px;
  border: 5px solid blue;
}

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

  <div class="cars">

    <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>
      </ul>
    </div>



    <button type="button" class="js-add-section">Add Section</button>

    <br>

    <div class="section">



    </div>



  </div>
  <br>

The issue is I am facing that, when I click on the Add Section button in a box, it adds duplicate rows in the other boxes. What I want to achieve is to add a row of checkboxes only in the box that I have clicked the 'Add Section' button.

When I click Add Category, it generates another box with another button Add Section

Please demo the code to get an overview. Please someone help me with this, I am totally stuck.

Thanks.

Answer 1

Just use $(this).parent().append(sectionContent); instead of $('.cars').append(sectionContent);

Working code

$('.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);
})

$('.js-add-category').click(function() {

  var categoryContent = `<div class="cars">

<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>
  </ul>
</div>

<button type="button" class="js-add-section">Add Section</button>
</div> <br>`

  $('.main').append(categoryContent);

});

$(document.body).on('click', 'button.js-add-section', function() {
  var sectionContent = `<div class="cars-item js-cars-item">
  <ul>
    <li>
      <input type="checkbox" id="car-1-6>
      <label for="car-1-6"><i class="icon-tick"></i></label>
    </li>
      <li>
      <input type="checkbox" id="car-2-6>
      <label for="car-2-6"><i class="icon-tick"></i></label>
    </li>
      <li>
      <input type="checkbox" id="car-3-6>
      <label for="car-3-6"><i class="icon-tick"></i></label>
    </li>
  </ul> </div>`

  $(this).parent().append(sectionContent);

});

.cars-item {
  border-bottom: 1px solid gray;
}

ul {
  /* Added to fully show console in snippet */
  margin: 2px;
}

li {
  display: inline;
}

.cars {
  box-sizing: content-box;
  width: 250px;
  height: auto;
  padding: 10px;
  border: 5px solid blue;
}

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

  <div class="cars">

    <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>
      </ul>
    </div>



    <button type="button" class="js-add-section">Add Section</button>

    <br>

    <div class="section">



    </div>



  </div>
  <br>

Answer 2

$(".cars") refers to all .cars elements. You only want the one that contains the button you clicked on. That would be $(this).closest(".cars")

To make the validation code work on newly added sections, you need to use event delegation, just like you do for the .js-add-section click handler.

$(".main").on('change', '.js-cars-item [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('.cars').find('.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 = [];
  $(this).closest(".cars").find(".cars-item input:checkbox:checked").each(function(index) {
    checkeds[index] = $(this).attr('id');
  });
  console.clear();
  console.log("These are checked:", checkeds);
})

$('.js-add-category').click(function() {

  var categoryContent = `<div class="cars">

<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>
  </ul>
</div>

<button type="button" class="js-add-section">Add Section</button>
</div> <br>`

  $('.main').append(categoryContent);

});


$(document.body).on('click', 'button.js-add-section', function() {
  var sectionContent = `<div class="cars-item js-cars-item">
  <ul>
    <li>
      <input type="checkbox" id="car-1-6>
      <label for="car-1-6"><i class="icon-tick"></i></label>
    </li>
      <li>
      <input type="checkbox" id="car-2-6>
      <label for="car-2-6"><i class="icon-tick"></i></label>
    </li>
      <li>
      <input type="checkbox" id="car-3-6>
      <label for="car-3-6"><i class="icon-tick"></i></label>
    </li>
  </ul> </div>`

  $(this).closest('.cars').append(sectionContent);

});

.cars-item {
  border-bottom: 1px solid gray;
}

ul {
  /* Added to fully show console in snippet */
  margin: 2px;
}

li {
  display: inline;
}

.cars {
  box-sizing: content-box;
  width: 250px;
  height: auto;
  padding: 10px;
  border: 5px solid blue;
}

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

  <div class="cars">

    <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>
      </ul>
    </div>

    <button type="button" class="js-add-section">Add Section</button>

    <br>

    <div class="section">
    </div>
  </div>
  <br>