Add / remove div for each button on click

Question

I'm trying use append to give each button it's own div (.modal-item) that can be created and removed inside of the .modal container when the button is clicked. Each .item has it's own button and different content nested inside.

What I need as an example: If I click the button labelled Btn 1, I want a .modal-item div created inside of .modal that has the content from the Btn 1 .item. If I click Btn 1 again, it is removed. The same goes for each of the buttons.

The buttons should act as a checkbox for creating and removing the .modal-items. So in other words, the adding/removing of each .modal-item is handled by it's button.

$(function() {
  $('#btn').click(function() {
    var newDiv = $('<div class="modal-item"><h4><a>Dynamic Title</a></h4> </div>');
    $('.modal').append(newDiv);
  });
});

.container {
  display: flex;
  border: 1px solid blue;
}

.item,
.modal-item {
  width: 100px;
  border: 1px solid;
}

.modal {
  display: flex;
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="item">
    <button id="btn">Btn 1</button>
    <h4> Test 1 </h4>
    <div class="subtitle"> Title 1 </div>
    <div class="info"> This is Info / Description 1. </div>
  </div>
  <div class="item">
    <button id="btn">Btn 2</button>
    <h4> Test 2 </h4>
    <div class="subtitle"> Title 2 </div>
    <div class="info"> This is Info / Description 2. </div>
  </div>
  <div class="item">
    <button id="btn">Btn 3</button>
    <h4> Test 3 </h4>
    <div class="subtitle"> Title 3 </div>
    <div class="info"> This is Info / Description 3. </div>
  </div>
</div>
<div class="modal"></div>

You cannot repeat ids, such as `btn`. Use a class instead. https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page — Taplar, Mar 26 '18 at 21:27
You give a lot of requirements, but I don't actually notice a question. What is your question? What part do you need help with? — Andrew Lohr, Mar 26 '18 at 21:29

score 2 · Accepted Answer · answered Mar 26 '18 at 21:30

1st: id must be unique so you need to change id="btn" to class="btn"

2nd: by using data attribute for each btn and pass it to the modal-item div it can be done

$(function() {
  $('.btn').click(function() {
    var newDiv = $('<div data-btn="'+$(this).attr("data-btn")+'" class="modal-item"><h4><a>Dynamic Title'+ ($(this).closest('.item').index() + 1) +'</a></h4> </div>');
    if($('.modal .modal-item[data-btn="'+$(this).attr("data-btn")+'"]').length < 1 ){
      $('.modal').append(newDiv);
    }else{
      $('.modal .modal-item[data-btn="'+$(this).attr("data-btn")+'"]').remove();
    }
  });
});

.container {
  display: flex;
  border: 1px solid blue;
}

.item,
.modal-item {
  width: 100px;
  border: 1px solid;
}

.modal {
  display: flex;
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="item">
    <button class="btn" data-btn="btn1">Btn 1</button>
    <h4> Test 1 </h4>
    <div class="subtitle"> Title 1 </div>
    <div class="info"> This is Info / Description 1. </div>
  </div>
  <div class="item">
    <button class="btn" data-btn="btn2">Btn 2</button>
    <h4> Test 2 </h4>
    <div class="subtitle"> Title 2 </div>
    <div class="info"> This is Info / Description 2. </div>
  </div>
  <div class="item">
    <button class="btn" data-btn="btn3">Btn 3</button>
    <h4> Test 3 </h4>
    <div class="subtitle"> Title 3 </div>
    <div class="info"> This is Info / Description 3. </div>
  </div>
</div>
<div class="modal"></div>

Add / remove div for each button on click

1 Answers1