Simple dynamic list with checkbox

Question

Looking for a way to make a dynamic list using checkbox "another item" with ability to remove if requested, like on this image:

It should support both adding and removing the items.

---

Edit:

My code is like:

<div id="contactdetails">
    <div class="row">
      <div class="col-lg-6 col-md-12">
        <div class="input-group">
         <span class="input-group-addon"><i class="fa fa-list"></i></span>
          <input name="firstname" id="firstname" type="text" class="form-control" spellcheck="false" placeholder="First Name">
        </div>
        <p class="note">Example: Mike</p>
      </div><!--row and col-->

      <div class="col-lg-6 col-md-12">
          <div class="form-group">
              <div class="input-group"><span class="input-group-addon"><i class="fa fa-usd"></i></span>
                <input name="familyname" id="familyname" type="text" class="form-control" spellcheck="false" placeholder="Family Name">
              </div>
            <p class="note">Example: Johnson</p>
          </div>
      </div>
    </div> <!--row and col-->

 <div class="row">
      <div class="col-lg-12 col-md-12">
       <div class="checkbox" style="padding-left:10px; margin-top: 0px;">
          <span>
            <label>
              <input name="addmore" id="addmore" type="checkbox" class="checkbox style-2"> 
              <span> More contacts</span> 
            </label>
          </span>
        </div>
      </div>
    </div> <!--row and col-->

</div><!--contact details-->

Answer 1

Try this. As i mentioned before, you can make use of $.clone() to achieve this.

<div>
<table>
<tr>
  <td>
    Item1
  </td>
  <td>
    Item2
  </td>
</tr>
<tr>
  <td>
    <input type="checkbox">
  </td>
</tr>    
</table>    
</div>
<script>
    $(document).on("click",":checkbox",function()
    {
     if($(this).is(":checked")) 
      {
        var clonedItem = $(this).closest('table').clone(); 
        $(clonedItem).find(":checkbox").removeAttr("checked");
        $(clonedItem).appendTo("div");   
      }
      else
      {
        if($(document).find(":checkbox").length > 0)
        $(this).closest('table').remove();
      }
    });
</script>

Example : https://jsfiddle.net/DinoMyte/sgcrupm8/1/

Answer 2

You can append items to a container and remove each item if the checkbox is checked.

 $("body").on("click","input[type='checkbox']",function() { if(!$(this).is(":checked")) { $(this).parent().remove(); } else { $("#container").append('<div class="item"><input type="text" placeholder="Name"><input type="text" placeholder="Family Name"><input type="checkbox"></div>') } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div class="item"><input type="text" placeholder="Name"><input type="text" placeholder="Family Name"><input type="checkbox"></div> </div>