Jquery Not Selecting Element

I am doing a program that creates boxes when I click a button. I have a 'model' box hidden so when I click the button, it clones the model box and changes its id. Inside this boxes

Solution 1:

You need to use event delegation for attaching events to dynamically added element.

As the ids are generated dynamically, you can not use them as selector in event delegation. you can rether use class selector to target anchor elements inside .header:

$('body').on('click','.heading a',function(){
  alert('boop'); //function
});

Solution 2:

$("body").find('#box-' + number).find('a').click(function(){
     alert('boop'); //function
});

The thing is, jQuery has loaded DOM before the box is generated. Assuming this code is in your $(document).ready(function()), your boxes are not yet generated when the document is ready. You need to go to "#box"'s parent element that was generated at the start (it doesnt have to be body)