Cada vez que hago clic en cualquier etiqueta h5, siempre inserta el primer h5, que es "Primera prueba" en el ejemplo a continuación, necesito imprimir el resto de las etiquetas si hago clic en él con la misma clase o ID si es necesario agregar.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h5 class="trial" style="cursor: pointer;">First Trial</h5> <h5 class="trial" style="cursor: pointer;">Second Trial</h5> <h5 class="trial" style="cursor: pointer;">Third Trial</h5> <h5 class="trial" style="cursor: pointer;">Fourth Trial</h5> <h5 class="trial" style="cursor: pointer;">Fifth Trial</h5> <h4 class="final"></h4> <script> $('.trial').click(function() { $('.final').html($('.trial').html()); }); </script>Solo para completar, una solución simple de JavaScript para aquellos que no quieren una dependencia de jQuery o simplemente quieren deshacerse de jQuery en 2021.
let elements = document.querySelectorAll('.trial'), container = document.querySelector('.final'); elements.forEach(element => element.addEventListener('click', event => { container.append(event.currentTarget.cloneNode(true)); })); <h5 class="trial" style="cursor: pointer;">First Trial</h5> <h5 class="trial" style="cursor: pointer;">Second Trial</h5> <h5 class="trial" style="cursor: pointer;">Third Trial</h5> <h5 class="trial" style="cursor: pointer;">Fourth Trial</h5> <h5 class="trial" style="cursor: pointer;">Fifth Trial</h5> <h4 class="final"></h4>Este fragmento agrega un detector de eventos a cada elemento h5.trial. Deberías evitar eso. Mejor práctica: agregue un solo detector de eventos a un elemento principal, que contiene los elementos que desea observar.
Puede obtener el elemento en el que se ha hecho clic con $(this) en su controlador de eventos. Luego, clone el elemento en el que se hizo clic y agréguelo al elemento .final , así:
$('.trial').click(function() { $('.final').append($(this).clone()) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h5 class="trial" style="cursor: pointer;">First Trial</h5> <h5 class="trial" style="cursor: pointer;">Second Trial</h5> <h5 class="trial" style="cursor: pointer;">Third Trial</h5> <h5 class="trial" style="cursor: pointer;">Fourth Trial</h5> <h5 class="trial" style="cursor: pointer;">Fifth Trial</h5> <h4 class="final"></h4>Si desea mostrar siempre el último elemento en el que se ha hecho clic, puede cambiar su secuencia de comandos de esta manera:
$('.trial').click(function() { $('.final').html($(this).clone()) });