单击按钮后如何将具有多个类的数据属性值输入到div？

Question

What I'm trying to achieve is to append a paragraph tag with an added text value, depending on the choice the user make, based on a data attribute.

However, the data attribute is within the same class and there is a total of 12 of these classes.

How do I differentiate the multiple values on button click?

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

Move your variable to inside the click function, and use $(this) to get the data attribute of the clicked element.

 $('.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>