Buenas noches amigos tengo una lista donde cada item tiene un enlace que contiene un valor diferente en su propiedad href pero al momento de obtener el valor y mostrar obtengo el valor del primer elemento para todos, quisiera que me ayuden por favor.
Lo que estoy buscando es obtener el valor de un enlace de cada item seleccionado y mostrarle en un modal para que el usuario pueda ínter actuar, en este caso obtengo el valor del primer elemento cuando hago clic en cualquier elemento cave recalcar que utilizo una clase para obtener el valor y por ende se repite. Lo que deseo hacer es corregir mi código para que obtenga el valor de cada enlace de cada item utilizando una misma clase ya que sera usado en un bucle y pueden ser una infinidad de items.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
.js-info{
margin-right: 20px;
}
.obtener-url{
color: green;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="bucle">
<div class="item">
<div class="opciones">
<a href="javascript:void(0)" class="js-info">Clic para ver info</a>
<a href="https://store.arte.com" class="boton-azul url-producto">ver más </a>
</div>
</div>
<div class="item">
<div class="opciones">
<a href="javascript:void(0)" class="js-info">Clic para ver info</a>
<a href="https://arte.com" class="boton-azul url-producto">ver más</a>
</div>
</div>
<div class="item">
<div class="opciones">
<a href="javascript:void(0)" class="js-info">Clic para ver info</a>
<a href="https://artesania.com" class="boton-azul url-producto">ver más</a>
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script>
$('.js-info').one('click', function() {
var urlItem = $('.url-producto').attr('href');
var plantilla = '<a href="'+urlItem+'" class="obtener-url">Datos a mostrar: '+ urlItem +'</a>';
$(this).append(plantilla);
});
</script>
</body>
</html>