jQuery Beni Çıldırtıyor

<script></script>
<script>
$(function(){
$("span.close").click(function(){
var id = $(this).attr("id");
$("div.box").attr("id", id).remove();
});

$("button").click(function(){
var kontrol = $("div.box").size();
if(kontrol < 1){
$("body").on("create", function(){
$("button").after('
Mesaj KutusuX
');
$("span.close").click(function(){
var id = $(this).attr("id");
$("div.box").attr("id", id).remove();
});
});
$("body").trigger("create");
}
});
})
</script>





Mesaj KutusuX









Arkadaşlar bu kodları çalıştırdığım zaman şöyle bir problemle karşılaşıyorum. Mesaj Kutusundaki X işaretine basıp kutuyu kapatıyorum. Daha sonra Yeni Pencere'ye tıkladığım zaman önce 2 tane sonra tekrar kapatıp tekrar Yeni Pencere butonuna tıkladığım zaman bu defa 3 tane Mesaj Kutusu oluşturuyor ve bu hep 1 artarak devam ediyor. Aynı işlemi on() metodunu kullanarak da denedim ama sonuç maalesef aynı oldu.

Aslında amacım sayfada mesaj kutusu varsa sayfadaki mesaj kutusu adetini bulup mesaj kutusunun genişliğiyle çarpıp bu değeri yeni açılacak Mesaj Kutusunun right parametresine aktarmak fakat henüz o aşamaya gelemeden burada takılıp kaldım.

Sorunun sebebi ne olabilir neden 1 tane oluşturması gerekirken sürekli artarak 1,3,5 ya da 10 tane oluşturuyor?