Problema gerando campos dinamicamente

[biza 1]

Ola viva pessoal,

Estou com um problema no javascript eu gostava de incrementar uma serie de componentes dinamicamente, o problema é que a partir do 3 componente ele começa a duplicar os anteriores campos introduzidos tem como alguém me dar uma ajudinha?!

var wrapper = $("#panel-add");

var n = $('.panel .panel-default').size() + 1;
 $('#add').click(function(){
 y=n+1;

var panel ='<div id="pn_'+ n +'" class="panel panel-default">\
                    <div class="panel-check"><input type="checkbox" name="opcao[]" id="'+ n +'" class="panel-heading" onclick="ActCheck(this)"/></div>\
                    '+ produto +' '+ y +'º - '+ tipo +'</div>\
                        <div id="body_'+ n +'" class="panel-body">\
                          <div class="panel-bodyLeft">\
                            <div class="panel-x1"></div>\
                            <div class="panel-x1">Participantes</div>\
                              <div class="panel-x1">\
                                <div class="rowControls">\
                                  <div class="field1"><button type="button" class="menos" id="min'+ n +'">-</button></div>\
                                  <div class="field2"><input type="text" class="txt" value="1" disabled="disabled" id="qntField'+ n +'"/></div>\
                                  <div class="field3"><button type="button" class="mais" id="max'+ n +'">+</button></div>\
                                </div>\
                              </div>\
                                <div class="panel-x1"></div>\
                          </div>\
                            <div class="panel-bodyRight">\
                              <div class="panel-x2">Preço:</div><div class="panel-x3">'+price+'<span>EUR</span></div>\
                              <div class="panel-x2">Típo de Actividade:</div><div class="panel-x3" id="type'+ n +'">Época Alta</div>\
                              <div class="panel-x2">Participantes:</div><div class="panel-x3" id="qt_'+ n +'"><span>PEX.</span></div>\
                                <input type="text" id="qnt_max'+ n +'" value="'+ max_unit +'" size="5"/>\
                                <input type="text" name="acomodacoes[]" size="5" id="qnt_'+ n +'" value="" size="5"/>\
                                <input type="text" name="precoA[]" size="5" id="precoA'+ n +'" value="'+price+'"/>\
                                <input type="text" name="totalA[]" size="10" id="totalA'+ n +'" value=""/>\
                                <input type="text" name="subtotais[]" class="somatorios" size="10" id="subtotal_'+ n +'" value=""/>\
                              <div class="panel-x2">Preço/Participante:</div><div class="panel-x3" id="price_'+ n +'"><span>EUR</span></div>\
                              <div class="panel-x2">Preço/Reserva:</div><div class="panel-x3"> <i id="qt'+ n +'"> </i> <b>pex. x </b><i id="price'+ n +'"></i><b> eur. =</b> <a id="totalAct'+ n +'"></a> <span>EUR</span></div>\
                            </div>\
                              <div style="clear: both;"></div>\
                    </div>'; 
$(wrapper).append(panel);
  /*contador de campos*/ 
  n++;

});

esse é o código elaborado em javascript que deve ser carregado nesta tag única de html:

<div id="panel-add"></div>

ele deveria aparecer como campo [1],[2],[3],[4],[5]...

o problema é que aparece da seguinte forma:

[1],[2][1],[3][2][1],[4][3][2][1],...

Qualquer ajuda é bem vinda