jquery clone element and increment id

Question

I'm an amateur who is keen to learn.

I've figured out, with a bit of help of you guys, how I can clone an element and change the Add and Remove button based on the order of the element.

I also figured out with the help of my friend Google how to do increment ID. I need this as the data is sent to a external solution.

Now I'm trying to melt the two solutions together. The cloning of the element and changing the label next to it works fine. But for some reason the increment ID isn't.

Would somebody be so kind enough to tell me where I went wrong?

$(function() {
  $(document).on('click', '.btn-add', function(e) {
    e.preventDefault();

    var controlForm = $(this).closest('.controls').find('form:first'),
      	currentEntry = $(this).parents('.entry:first'),
      	newEntry = $(currentEntry.clone()).appendTo(controlForm),
      	regex = /^(.+?)(\d+)$/i,
		cloneIndex = $(".entry").length;

    newEntry.find('input').val('');
    controlForm.find('.entry:not(:last) .btn-add')
    	.removeClass('btn-add').addClass('btn-remove')
      	.removeClass('btn-success').addClass('btn-danger')
      	.attr("id", "entry" +  cloneIndex)
        .find("*")
        .each(function() {
            var id = this.id || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cloneIndex);
            }
        })
      .html('<span class="icon_minus_alt2"></span>');
  })

  .on('click', '.btn-remove', function(e) {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
  <form class="school_form" role="form" autocomplete="off">
    <div id="entry" class="entry input-group">
      <input type="text" name="opl_datum" placeholder="Periode">
      <input type="text" name="diploma" placeholder="Diploma">
      <input type="text" name="school" placeholder="School">
      <span class="input-group-btn">
        <button class="btn btn-success btn-add enableOnInput" type="button">
          <span>Voeg opleinding toe</span>
        </button>
      </span>
    </div>
  </form>
</div>

Answer 1

You need to change the div id, not the button's. This works:

$(function() {
  $(document).on('click', '.btn-add', function(e) {
    e.preventDefault();

    var controlForm = $(this).closest('.controls').find('form:first'),
      	currentEntry = $(this).parents('.entry:first'),
      	newEntry = $(currentEntry.clone()).appendTo(controlForm),
      	regex = /^(.+?)(\d+)$/i,
		cloneIndex = $(".entry").length;

    newEntry.find('input').val('');
    // Change div id
    newEntry.attr("id", "entry" +  cloneIndex);
    controlForm.find('.entry:not(:last) .btn-add')
    	.removeClass('btn-add').addClass('btn-remove')
      	.removeClass('btn-success').addClass('btn-danger')
        // Not this one
      	//.attr("id", "entry" +  cloneIndex)
        .find("*")
        .each(function() {
            var id = this.id || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cloneIndex);
            }
        })
      .html('<span class="icon_minus_alt2"></span>');
  })

  .on('click', '.btn-remove', function(e) {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
  <form class="school_form" role="form" autocomplete="off">
    <div id="entry" class="entry input-group">
      <input type="text" name="opl_datum" placeholder="Periode">
      <input type="text" name="diploma" placeholder="Diploma">
      <input type="text" name="school" placeholder="School">
      <span class="input-group-btn">
        <button class="btn btn-success btn-add enableOnInput" type="button">
          <span>Voeg opleinding toe</span>
        </button>
      </span>
    </div>
  </form>
</div>