Question: I have two buttons with the same ID but with different text in the alt property. When the buttons are clicked, I need *that button's* alt text to load in the textbox. I am currently only getting "undefined"

```js
$(document).ready(function() {
  $('button').on('click', function() {
    var sentence = $('button').prop('alt');
    var text = $('#the_box');
    text.val(text.val() + sentence + ' ');
  });
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-8 col-xs-offset-2">
      <h5 style="text-align:center;">
        The buttons have alt="" text that needs to be added to the contents of the textbox when pressed.
      </h5>
      <div style="box-shadow:2px 2px 5px black; min-height:200px; padding:25px; margin:10px;">
        <textarea id="the_box" class="form-control" rows="3"></textarea>
        <button class="btn" id="hotlink" alt="I am very concerned.">Concerned</button>

        <button class="btn" id="hotlink" alt="I am very happy.">Happy</button>
      </div>
    </div>

  </div>

</div>
```

[Link to problem on JS fiddle](https://jsfiddle.net/dadiletta/j6whzwc3/)

Answer: 
Try this, you need to use the `attr` function instead of `prop` and `$(this)` instead of `$('button')`

```js
$(document).ready(function() {
  $('button').on('click', function(e) {
    var sentence = $(this).attr('alt');
    var text = $('#the_box');
    text.val(text.val() + sentence + ' ');
  });
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-8 col-xs-offset-2">
      <h5 style="text-align:center;">
        The buttons have alt="" text that needs to be added to the contents of the textbox when pressed.
      </h5>
      <div style="box-shadow:2px 2px 5px black; min-height:200px; padding:25px; margin:10px;">
        <textarea id="the_box" class="form-control" rows="3"></textarea>
        <button class="btn" id="hotlink" alt="I am very concerned.">Concerned</button>

        <button class="btn" id="hotlink" alt="I am very happy.">Happy</button>
      </div>
    </div>

  </div>

</div>
```
You should use `ID` for unique identification of the element throughout the HTML page. To access the `alt` attribute better use `attr()` function, `prop()` is used to [retrieve property](http://api.jquery.com/prop/) values (eg. checked status of checkbox)

change you HTML code

```
    <button class="btn hotlink" alt="I am very concerned.">Concerned</button>

    <button class="btn hotlink" alt="I am very happy.">Happy</button>

```

So, your script will be

```
$(document).ready(function() {
 $('document').on('click', '.hotlink', function() {
   var sentence = $(this).attr('alt');
   var text = $('#the_box');
   text.val(text.val() +' '+ sentence + ' ');
 });
});

```