하나의 클릭 버튼으로 동일한 속성 이름으로 다른 데이터 값을 가져올 수 있습니까?

Question

하나의 클릭 버튼으로 동일한 속성 이름에서 다른 데이터 값을 가져오고 싶습니다. Jquery를 사용하여이 작업을 수행 할 수 있습니까? 그래서 내가 buttom을 클릭하면 "01"이라고 표시됩니다. 다시 클릭하면 "02"가 표시됩니다. 내가 jQuery를 사용하여 솔루션을 개발 한

<script> 
$(document).ready(function(){ 
    $(".more-info").click(function(){ 
    var getData = document.getElementsByClassName("showTitle"); 
    document.getElementById("gridModalLabel").innerHTML = 
    $(".showtitle").data('prodname'); 
}); 


    }); 

</script> 

<div class="analytic-product showtitle" data-prodname="01" id="w3s"></div> 
<div class="analytic-product showtitle" data-prodname="02" id="w3s"></div> 
<div class="analytic-product showtitle" data-prodname="03" id="w3s"></div> 

<h4 class="modal-title" data-target="#gridSystemModal" id="gridModalLabel"></h4> 
<button class='btn btn-default btn-lg more-info' data-target='#gridSystemModal' data-toggle='modal' type='button'>Schedule Meeting</button> 

Answer 1

: 여기 내 코드입니다. 클릭 할 때마다 div의 데이터 속성이 내가 만든 대상 div에 추가됩니다. undefined를 다루기 위해 코드를 업데이트했습니다.

$(function() { 
 

 
    var $dataDivs = $('div.analytic-product'); 
 
    var $target = $('#target'); 
 
    var indexTracker = 0; 
 

 

 
    $('.btn.more-info').on('click', function(e) {  
 
    if (indexTracker < $dataDivs.length) 
 
     $target.append($($dataDivs[indexTracker++]).data('prodname') + "<br>"); 
 
    }); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="analytic-product showtitle" data-prodname="01" id="w3s"></div> 
 
<div class="analytic-product showtitle" data-prodname="02" id="w3s"></div> 
 
<div class="analytic-product showtitle" data-prodname="03" id="w3s"></div> 
 
<div id="target"></div> 
 
<h4 class="modal-title" data-target="#gridSystemModal" id="gridModalLabel"></h4> 
 
<button class='btn btn-default btn-lg more-info' data-target='#gridSystemModal' data-toggle='modal' type='button'>Schedule Meeting</button>