[SOLUCIONADO] input dinamico trabajen de forma independiente

[sarrhen]

Hola tengo este input dinamico pero la situacion es que cuando le doy al button + no me trabaja de forma indepentiende cada uno

Código HTML:

<title>Formulario Dinamico</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.addfield2.js"></script>
<div id="stylized" class="myform" style="margin:20px auto;">
<form id="form" name="form" method="post" action="procesar1.php">
<div id="material_comprado"> </div> 
<h1>Campos Din&aacute;mico</h1>
<label><span class="small">A&ntilde;ade las conceptos</span>
</label><br />
<div id="div_1">
<label>Codigo de Producto</label>
<input type="text" name="concepto[]" id="concepto" style="width:200px;" /> <br>
<label>Valor</label>
<input type="text" name="valor[]" id="valor" style="width:200px;" />
<input class="bt_plus" id="1" type="button" value="+" /><div class="error_form">
</div>
</div>
<div id="div_2">
<label>Codigo de Producto</label>
<input type="text" name="concepto[]" id="concepto" style="width:200px;" /> <br>
<label>Valor</label>
<input type="text" name="valor[]" id="valor" style="width:200px;" />
<input class="bt_plus1" id="2" type="button" value="+" /><div class="error_form">
</div>
</div>
<button type="submit" class="boton">Enviar</button>
<div class="spacer"></div>
</form>
 

y este el js

Código Javascript:

$(document).ready(function() {
    //ACA le asigno el evento click a cada boton de la clase bt_plus y llamo a la funcion addField
        $(".bt_plus").each(function (el){
            $(this).bind("click",addField);
                                     });
                            });
$(document).ready(function() {
    //ACA le asigno el evento click a cada boton de la clase bt_plus y llamo a la funcion addField
        $(".bt_plus1").each(function (el){
            $(this).bind("click",addField);
                                     });
                            });
function addField(){
// ID del elemento div quitandole la palabra "div_" de delante. Pasi asi poder aumentar el n�mero. Esta parte no es necesaria pero yo la utilizaba ya que cada campo de mi formulario tenia un autosuggest , as� que dejo como seria por si a alguien le hace falta.
var clickID = parseInt($(this).parent('div').attr('id').replace('div_',''));
// Genero el nuevo numero id
var newID = (clickID+1);
// Creo un clon del elemento div que contiene los campos de texto
$newClone = $('#div_'+clickID).clone(true);
//Le asigno el nuevo numero id
$newClone.attr("id",'div_'+newID);
//Asigno nuevo id al primer campo input dentro del div y le borro cualquier valor que tenga asi no copia lo ultimo que hayas escrito.(igual que antes no es necesario tener un id)
$newClone.children("input").eq(0).attr("id",'parada'+newID).val('');
//Borro el valor del segundo campo input(este caso es el campo de cantidad)
//$newClone.children("input").eq(1).val('');
$newClone.children("input").eq(1).val('');
//Asigno nuevo id al boton
$newClone.children("input").eq(2).attr("id",newID)
//Inserto el div clonado y modificado despues del div original
$newClone.insertAfter($('#div_'+clickID));
//Cambio el signo "+" por el signo "-" y le quito el evento addfield
$("#"+clickID).val('-').unbind("click",addField);
//Ahora le asigno el evento delRow para que borre la fial en caso de hacer click
$("#"+clickID).bind("click",delRow);                    
function delRow() {
// Funcion que destruye el elemento actual una vez echo el click
$(this).parent('div').remove();
}
 

[Alexis88]

Para elementos dinámicos, lo conveniente es delegar eventos.

Saludos

[sarrhen]

Ok voy a leer pero me podrias dar una nocion no soy muy bueno con jquery

[PHPeros]

La delegación de eventos consiste en registrar el evento a un elemento de nivel superior ya existente, y usar un selector para filtrar durante la fase de captura o bubbling los descendientes con los que vayas a trabajar únicamente.

Todo ello a raíz de que jQuery no manipula directamente sobre el DOM

[sarrhen]

Se que la informacion que me han dado la he leido pero aun asi me esta costando conseguir el funcionamiento que deseo y he visto que no solo a mi me afecta por favor si no es molestia darme una luz que tengo que modificar para solucionar el problema gracias

[sarrhen]

solucionado dejo el enlace para el que lo desee utilizar y no pase mis penurias
lo sencillo es lo mas bello

https://jsfiddle.net/vv358bLj/1/