ボタンをクリックした後、複数のクラスを持つデータ属性値をdivに入力するにはどうすればよいですか？

Question

私が達成しようとしているのは、データ属性に基づいて、ユーザーが選択したものに応じて、テキスト値が追加された段落タグを追加することです。

ただし、data属性は同じクラス内にあり、合計で12個あります。

ボタンクリックで複数の値を区別するにはどうすればよいですか？

Codepen：https://codepen.io/aahlfeeyann/pen/dzejOg

<div class="container q1"> 
    <div class="row"><button class="btn btn-card" data-messages="1A">1A</button></div> 
    <div class="row"><button class="btn btn-card" data-messages="1B">1B</button></div> 
    <div class="row"><button class="btn btn-card" data-messages="1C">1C</button></div> 
    <div class="row"><button class="btn btn-card" data-messages="1D">1D</button></div> 
</div> 
<div class="container q2"> 
    <div class="row"><button class="btn btn-card" data-messages="2A">2A</button></div> 
    <div class="row"><button class="btn btn-card" data-messages="2B">2B</button></div> 
    <div class="row"><button class="btn btn-card" data-messages="2C">2C</button></div> 
    <div class="row"><button class="btn btn-card" data-messages="2D">2D</button></div> 
</div> 
<div class="container q3"> 
    <div class="row"><button class="btn btn-card" data-messages="3A">3A</button></div> 
    <div class="row"><button class="btn btn-card" data-messages="3B">3B</button></div> 
    <div class="row"><button class="btn btn-card" data-messages="3C">3C</button></div> 
    <div class="row"><button class="btn btn-card" data-messages="3D">3D</button></div> 
</div> 

// Message to Preview 
var buttonMessage = $('.btn-card').data('messages'); 
$('.btn-card').click(function(){ 
    console.log(buttonMessage); 
    $('#messageOne').append(buttonMessage); 
}) 

Answer 1

は click関数内にあなたの変数を移動し、クリックされた要素のデータ属性を取得するために $(this)を使用し

。

$('.btn-card').click(function() { 
 
    var buttonMessage = $(this).data('messages'); 
 
    console.log(buttonMessage); 
 
    $('#messageOne').append(buttonMessage); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container q1"> 
 
    <div class="row"><button class="btn btn-card" data-messages="1A">1A</button></div> 
 
    <div class="row"><button class="btn btn-card" data-messages="1B">1B</button></div> 
 
    <div class="row"><button class="btn btn-card" data-messages="1C">1C</button></div> 
 
    <div class="row"><button class="btn btn-card" data-messages="1D">1D</button></div> 
 
</div> 
 
<div class="container q2"> 
 
    <div class="row"><button class="btn btn-card" data-messages="2A">2A</button></div> 
 
    <div class="row"><button class="btn btn-card" data-messages="2B">2B</button></div> 
 
    <div class="row"><button class="btn btn-card" data-messages="2C">2C</button></div> 
 
    <div class="row"><button class="btn btn-card" data-messages="2D">2D</button></div> 
 
</div> 
 
<div class="container q3"> 
 
    <div class="row"><button class="btn btn-card" data-messages="3A">3A</button></div> 
 
    <div class="row"><button class="btn btn-card" data-messages="3B">3B</button></div> 
 
    <div class="row"><button class="btn btn-card" data-messages="3C">3C</button></div> 
 
    <div class="row"><button class="btn btn-card" data-messages="3D">3D</button></div> 
 
</div>