How to add dynamic attributes through jquery?

Question

I need to add anaytics to track each of these buttons' clicks for a callout.

My code is as follows...

var headers = $(".callouts .callout-inner h2").text();
var buttons = $(".callouts .callout-inner a.button");
buttons.addClass("button-data");
buttons.attr("data-button-info", headers);

a.button {
  text-decoration: none;
  padding: 10px;
  background: #00007f;
  color: #fff;
  border-radius: 10px;
  font-family: Arial;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  transition: all 0.5s ease;
}

a.button:hover {
  background: #efefef;
  color: #00007f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container callouts">
  <div class="col-sm-6 col-md-4 callout-wrapper">
    <div class="callout">
      <img class="img-responsive" alt=" " src="#" width="350" height="117">
      <div class="callout-inner">
        <h2>First Header 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed lacus placerat, malesuada magna vitae, blandit risus. Nunc lobortis justo eu purus vestibulum porta.</p>
        <a class="button" href="#" target="_self">Button 1</a>
      </div>
      <div class="callout-bottom"></div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4 callout-wrapper">
    <div class="callout">
      <img class="img-responsive" alt=" " src="#" width="350" height="117">
      <div class="callout-inner">
        <h2>Second Header 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed lacus placerat, malesuada magna vitae, blandit risus. Nunc lobortis justo eu purus vestibulum porta.</p>
        <a class="button" href="#" target="_self">Button 2</a>
      </div>
      <div class="callout-bottom"></div>
    </div>
  </div>
  <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0 callout-wrapper callout3">
    <div class="callout">
      <img class="img-responsive" alt=" " width="350" height="117">
      <div class="callout-inner">
        <h2>Third Header 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed lacus placerat, malesuada magna vitae, blandit risus. Nunc lobortis justo eu purus vestibulum porta.</p>
        <a class="button" href="#" target="_self">Button 3</a>
      </div>
      <div class="callout-bottom"></div>
    </div>
  </div>
</div>

The end result I am getting is the data-button-info attribute for each of the buttons contains every h2 (if you inspect the buttons after running the snippet you can better see what is happening). My goal is to get each button to have it's corresponding h2 text value as it's attribute for tracking purposes. So for instance "Button 1" contains a "data-button-info" attribute with the value of "First Header 1". I'm not understanding why it's populating the attribute with all of the h2 values.

I'd appreciate any help and guidance here as I am very new to jquery/js.

Thanks in advance!

Answer 1

This also works,

for(let keys in buttons) {
    let button = $(buttons[key]);
    let buttonData = $(button.parent().siblings('h2')[0]).text();
    button.attr("data-button-info", buttonData);
}

Answer 2

This code would meet your needs

$(".callouts .callout-inner").each(function(){
    var header = $(this).find("h2").text();
    var button = $(this).find("a.button");
    button.addClass("button-data");
    button.attr("data-button-info", header);
});

Answer 3

You will need to go trough your collection with each() and refer to element itself as point reference with $(this) like:

var buttons = $(".callouts .callout-inner a.button");
buttons.addClass("button-data").each(function(){
  var headers = $(this).parent().find('h2').text();
  $(this).attr("data-button-info", headers);
})

a.button {
  text-decoration: none;
  padding: 10px;
  background: #00007f;
  color: #fff;
  border-radius: 10px;
  font-family: Arial;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  transition: all 0.5s ease;
}

a.button:hover {
  background: #efefef;
  color: #00007f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container callouts">
  <div class="col-sm-6 col-md-4 callout-wrapper">
    <div class="callout">
      <img class="img-responsive" alt=" " src="#" width="350" height="117">
      <div class="callout-inner">
        <h2>First Header 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed lacus placerat, malesuada magna vitae, blandit risus. Nunc lobortis justo eu purus vestibulum porta.</p>
        <a class="button" href="#" target="_self">Button 1</a>
      </div>
      <div class="callout-bottom"></div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4 callout-wrapper">
    <div class="callout">
      <img class="img-responsive" alt=" " src="#" width="350" height="117">
      <div class="callout-inner">
        <h2>Second Header 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed lacus placerat, malesuada magna vitae, blandit risus. Nunc lobortis justo eu purus vestibulum porta.</p>
        <a class="button" href="#" target="_self">Button 2</a>
      </div>
      <div class="callout-bottom"></div>
    </div>
  </div>
  <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0 callout-wrapper callout3">
    <div class="callout">
      <img class="img-responsive" alt=" " width="350" height="117">
      <div class="callout-inner">
        <h2>Third Header 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed lacus placerat, malesuada magna vitae, blandit risus. Nunc lobortis justo eu purus vestibulum porta.</p>
        <a class="button" href="#" target="_self">Button 3</a>
      </div>
      <div class="callout-bottom"></div>
    </div>
  </div>
</div>