Add / remove elements

HTML

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<div class="acal-position-container">
<div class="acal-card-container">
  <input type="hidden" name="id[]" value="">
  <div style="background-color:#ADD8E6;padding:15px;margin-top:15px;">
    <div style="text-align:right;margin-bottom:10px;">
      <a href="#" class="remove-position-card"><strong>Remove position </strong></a>
    </div>
    <div class="form-group">
      <label for="title[]">Title</label>
      <input type="text" name="title[]" value="" class="form-control" required>
    </div>
  </div>
</div>
</div>

    <input type="button" id="add_position_card" style="margin-top:5px;" value="Add position">

JavaScript

$('.acal-position-container').on('click','.remove-position-card' ,function() {
  $(this).closest('.acal-card-container').remove();
  //console.log('called');
});

$('#add_position_card').click(function() {
  $('.acal-position-container').append('<div class="acal-card-container">'+
'  <input type="hidden" name="id[]" value="">'+
'  <div style="background-color:#ADD8E6;padding:15px;margin-top:15px;">'+
'    <div style="text-align:right;margin-bottom:10px;">'+
'      <a href="#" class="remove-position-card"><strong>Remove position </strong></a>'+
'    </div>'+
'    <div class="form-group">'+
'      <label for="title[]">Title</label>'+
'      <input type="text" name="title[]" value="" class="form-control" required>'+
'    </div>'+
'  </div>'+
'</div>')
});