Change inner elements id during clone
Use the class .show-tick and the .children() method to locate the element:
clone.children('.show-tick').attr('id', 'select-' + length);
$(function() {
//on click
$(".btn-primary").on("click", function() {
alert($(".input-group").length)
var
//get length of selections
length = $(".input-group").length,
//create new id
newId = "selection-" + length,
//clone first element with new id
clone = $("#selection").clone().attr("id", newId);
clone.children('.show-tick').attr('id', 'select-' + length++);
//append clone on the end
$("#selections").append(clone);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selections">
<div class="input-group" id="selection">
<span class="input-group-addon">
<i class="icon wb-menu" aria-hidden="true"></i>
</span>
<select class="show-tick" data-plugin="select2" id="select">
<option>True</option>
<option>False</option>
</select>
</div>
</div>
<button class="btn btn-primary" type="button" style="margin-left: 30px;">
Add new selection
</button>Yes.. its totally possible as follows:
var clone = $("#selection").clone();
clone.attr("id", newId);
clone.find("#select").attr("id","select-"+length);
//append clone on the end
$("#selections").append(clone);