javascript - Add text to an input field x when user clicks button x -

i have list of text inputs, each associated button. here's setup: jsfiddle

i can working individually (see top button working),

but how can make clicking of buttons change text of associated input (button# --> text#), without repeating code each item?

html:

<input type="text" id="text1" style="width: 150px;" /><input type="button" value="click me" id="button1" /><br/> <input type="text" id="text2" style="width: 150px;" /><input type="button" value="click me" id="button2" /><br/> <input type="text" id="text3" style="width: 150px;" /><input type="button" value="click me" id="button3" /><br/> <input type="text" id="text4" style="width: 150px;" /><input type="button" value="click me" id="button4" /><br/> <input type="text" id="text5" style="width: 150px;" /><input type="button" value="click me" id="button5" /><br/> 

jquery:

$(function () {     $('#button1').on('click', function () {         var text = $('#text1');         text.val('stuff');         }); }); 

1. bind event on buttons using attribute selector. $('[id^=button]') select elements id starts button
2. use $(this) inside event handler access element clicked.
3. use prev, select previous sibling of element.
4. i recommend add same class buttons, event can bound using class. $('.mybuttons').on('click', function() {});, , no longer need id on each of button. useful style elements.

$('[id^=button]').on('click', function() {    $(this).prev().val('stuff');  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  <input type="text" id="text1" style="width: 150px;" />  <input type="button" value="click me" id="button1" />  <br/>  <input type="text" id="text2" style="width: 150px;" />  <input type="button" value="click me" id="button2" />  <br/>  <input type="text" id="text3" style="width: 150px;" />  <input type="button" value="click me" id="button3" />  <br/>  <input type="text" id="text4" style="width: 150px;" />  <input type="button" value="click me" id="button4" />  <br/>  <input type="text" id="text5" style="width: 150px;" />  <input type="button" value="click me" id="button5" />  <br/>

---

the above code not work if change html structure. can use more flexible approach below

1. use data-* custom attributes store association of button textbox.
2. when button clicked value of data-target attribute , update value of corresponding textbox.

$('.button').on('click', function() {    $($(this).data('target')).val('stuff');  });

.text {    width: 150px;    border: solid 1px green;  }  .button {      border: solid 1px green;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  <input type="text" id="text1" class="text" />  <input type="button" value="click me" class="button" data-target="#text1" />  <br/>  <input type="text" id="text2" class="text" />  <input type="button" value="click me" class="button" data-target="#text2" />  <br/>  <input type="text" id="text3" class="text" />  <input type="button" value="click me" class="button" data-target="#text3" />  <br/>  <input type="text" id="text4" class="text" />  <input type="button" value="click me" class="button" data-target="#text4" />  <br/>  <input type="text" id="text5" class="text" />  <input type="button" value="click me" class="button" data-target="#text5" />  <br/>