Quiero crear varios usuarios. En mi avance he logrado clonar los nodos, cada uno con sus datos diferentes, lo que quiero hacer ahora es poder editar esa información en caso de que esté mal o simplemente se quiera modificar, pero al hacer el proceso similar a lo que hice anteriormente, la información se coloca exactamente igual en todos los nodos y no diferente para cada uno.
Intenté hacerlo similar a lo que hice en un inicio, pero se repite lo mismo en todos.
function clonacionNodos(){
var nombre = document.getElementById("modalNombre").value;
var telefono = document.getElementById("modalTelefono").value;
nombre_usuario = document.querySelectorAll("#modalNombre");
last_nombre_usuario = nombre_usuario[nombre_usuario.length-1];
document.getElementById("capturaNombre").innerHTML = nombre;
console.log(last_nombre_usuario);
telefono_usuario = document.querySelectorAll("#modalTelefono");
last_telefono_usuario = telefono_usuario[telefono_usuario.length-1];
document.getElementById("capturaTelefono").innerHTML = telefono;
console.log(last_telefono_usuario);
//Pasar al formulario de edicion de nombre
let guardarEditNombre = document.getElementById("modalNombre").value;
document.getElementById("inputName").value = guardarEditNombre;
let guardarEditTelefono = document.getElementById("modalTelefono").value;
document.getElementById("inputTelefono").value = guardarEditTelefono;
const node = document.getElementById("elementoNodo");
const clone = node.cloneNode(true);
document.getElementById("contenedorElementos").appendChild(clone);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="dark.css">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/03a89292db.js" crossorigin="anonymous"></script>
<script src="chart/chart.min.js"></script>
<title>Proyecto Morena</title>
</head>
<body>
<!--MENU-->
<!---------------------------------->
<!--MODAL DE AGREGACION DE USUARIO-->
<!---------------------------------->
<div class="modal fade" id="modalNuevoUsuario" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Agregar nuevo usuario</h5>
<button type="button" class="close btn btn-danger" data-bs-dismiss="modal" aria-label="Close" >
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body form-group">
<form>
<div class="form-group">
<label for="modalNombre">Nombre:</label>
<input type="text" class="form-control" id="modalNombre" placeholder="Nombre completo del usuario">
</div>
<div class="form-group">
<label for="modalTelefono">Telefono:</label>
<input type="tel" class="form-control" id="modalTelefono" placeholder="Numero telefonico">
</div>
<div class="form-group">
<label for="modalRuta">Ruta:</label>
<input type="text" class="form-control" id="modalRuta" placeholder="Ruta del usuario">
</div>
<div class="form-group">
<label for="modalLocalidad">Localidad:</label>
<input type="text" class="form-control" id="modalLocalidad" placeholder="Municipio donde radica">
</div>
<div class="form-group">
<label for="modalRFC">RFC:</label>
<input type="text" class="form-control" id="modalRFC" placeholder="RFC">
</div>
<div class="form-group">
<label for="modalBancario">Cuenta bancaria:</label>
<input type="number" class="form-control" id="modalBancario" placeholder="Numero CLABE de cuenta interbancaria">
</div>
<div class="form-group">
<label for="modalImagen">Fotografia del usuario (opcional):</label>
<input type="file" class="form-control" id="modalImagen" accept="image/*">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">CANCELAR</button>
<button type="button" class="btn btn-success" data-bs-dismiss="modal" onclick="clonacionNodos()">GUARDAR USUARIO</button>
</div>
</div>
</div>
</div>
<!--MODAL EDITAR USUARIOS-->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Editar perfil</h5>
<button type="button" class="close btn btn-danger" data-bs-dismiss="modal" aria-label="Close" >
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body form-group">
<div class="mytabs">
<input type="radio" id="tabfree" name="mytabs" checked="checked">
<label for="tabfree">CONVENCIDOS</label>
<div class="tab">
<h1>RUTA 4</h1>
<p><input type="number"> CONVENCIDOS</p>
<p><input type="number"> COMITES</p>
<p><input type="number"> LLAMADAS</p>
</div>
<input type="radio" id="tabgold" name="mytabs">
<label for="tabgold">DATOS PERSONALES</label>
<div class="tab">
<form style="margin-left: 50px;" class="form-group">
<p>Nombre completo: <input type="text" id="inputName" class="form-control" name="nombrecompleto"></p>
<p>Telefono: <input type="tel" id="inputTelefono" class="form-control" name="telefono"></p>
<p>Ruta: <input type="text" id="inputRuta" class="form-control" name="ruta"></p>
<p>Localidad: <input type="text" id="inputLocalidad" class="form-control" name="localidad"></p>
<p>RFC: <input type="text" id="inputRFC" class="form-control" name="rfc"></p>
<p>Cuenta bancaria: <input id="inputBancario" type="number" class="form-control" name="cuenta_bancaria"></p>
<p>Imagen de perfil: <input type="file" class="form-control" name="imagen_perfil"></p>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">CERRAR</button>
<button type="button" class="btn btn-success">GUARDAR CAMBIOS</button>
</div>
</div>
</div>
</div>
<!--........................-->
</div> <br></div>
<div>
<div id="ranking">
<h2 style="text-align: center;">DISTRITO 34</h2>
<div id="ranking_inicio">
<canvas id="miGrafica" width="400" height="200"></canvas>
</div>
</div>
</div>
</div>
</div>
</section>
<!--SECCION DE COT'S-->
<br>
<div class="container text-center" id="integrantes">
<h2>COT'S (Distrito 34)</h2>
</div>
<!--Contacto-->
<section>
<div class="container border border-primary"> <br>
<div class="album bg-light">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3" id="contenedorElementos">
<div class="col" id="elementoNodo">
<div class="card shadow-sm">
<img src="img/usuario1.webp"class="bd-placeholder-img card-img-top" width="100%" height="225"><h6 id="capturaNombre">ISAAC RENE MONTES DE OCA MARAVILLA</h6></img>
<div class="card-body">
<p class="card-text" id="capturaTelefono" >0 Convencidos</p>
<p class="card-text">0 Comites</p>
<p class="card-text">0 Llamadas</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button class="btn btn-warning" id="botonPerfil" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">Editar perfil</button>
<button type="button" class="btn btn-danger">Eliminar usuario</button>
</div>
<small class="text-muted">CACALOMACAN</small>
</div>
</div>
</div>
</div>
<div>
<div class="row aling-items-center">
<button class="btn btn-primary btn-lg active" role="button" aria-pressed="true" data-bs-toggle="modal" data-bs-target="#modalNuevoUsuario">AGREGAR NUEVO COT</button>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
getElementById
. Para ello, cuando clones, cambia elid
del elemento clonado y hecha mano de clases y atributos personalizados para tu uso posterior, y para identificar losinput
de cada nodo individual (o el propio id si tiene formato como `id="telefono_xx"', por ejemplo