You may be getting classes mixed up with IDs in this case. It's an easy thing to do, especially when new to jQuery or CSS (since the selectors are very similar). The primary difference between classes and IDs is that classes can apply to many elements on a page, where IDs only apply to one element (and should never apply to multiple elements on one page).
That being said, you are adding a class of apples to a div, then appending a button to all elements with a class of apples (first click, there is only one - the newly created one), then appending that .apples element to the page. Be wary that $('.apples') is selecting all .apples elements. So the second time you click, you are appending to the first .apples element that was created, plus the new one you are creating.
To resolve the situation, either add IDs to the element (longer, more difficult route, though not very difficult by any means), or more elegantly, you can append the button as you're generating your new .apples element. Since I'm not sure of your end-game here, I will add some bogus functionality (a reason for the buttons to be there). I'm going to use them to remove the .apples element that they are a child of, though you could change their functionality to fit your needs.
We'll start with some basic HTML:
<button id='add'>Add Apples</button>
<input id='input'>
<div id='container'></div>
I think my #container may correspond with your .div1, but I'm not sure without seeing your HTML code. In any case, we can proceed with the JavaScript (and jQuery) portion:
$('#add').click(function() {
//gather input data
var num = $('#input').val();
//validate input data
if(num == '' || isNaN(num)) {
alert("Please enter a numerical value.");
$('#input').focus();
return false;
}
//manipulate input data
$('<div>', {class:'apples'}).append(
num,
'<br>',
$('<button>',{text:'-'}).click(function() {$(this).closest('.apples').remove(); })
).appendTo('#container');
//clear the input field
$('#input').val('');
});
Here's a jsFiddle link so you can review to see it in action:
(NOTE: I added validation to the input field, you MUST add a number to click Add Apples)
https://jsfiddle.net/jezztutz/
What's happening is, on the button click (Add Apples, or #add) we gather the numerical input (or supposed to be numerical in my case), validate that it's not empty and is, in fact, a number (if not, error out). Then we generate a div on the fly, append that number to it, append a horizontal break, and finally append a button directly to that element (no more of that selecting multiple elements nonsense). We can then append that .apples div, complete with button, to the #container div (in my example), and clear out the input field to start anew.
