jQuery add click function to multiple input

Question

I want to have a function that responds to a click on each instance of an input field. But the function only responds to a click on the first instance of the input.

The HTML is:

<table class="table">
  <tr>
     <td><input id="show-output" type="button" value=261 /></td>
     <td>mhour test202</td>
  </tr>
  <tr>
     <td><input id="show-output" type="button" value=260 /></td>
     <td>mhour test145</td>
  </tr>
</table>

The function is

$('#show-output').click(function(e) {
  alert("hi");
});

A fiddle for this

Use classes to group elements. `id` can only refer to unique elements — Rory McCrossan, Mar 14 '19 at 16:44
You should use an id only once per page. Use a class here and it will work — JonSnow, Mar 14 '19 at 16:45
@lalo it's a workaround that you should never use though. You should be fixing the source of the problem instead of hacking around it. — Rory McCrossan, Mar 14 '19 at 16:51

score 1 · Accepted Answer · answered Mar 14 '19 at 16:47

Change your ids to classes, as an id should always appear just once on a page.

$('.show-output').click(function(e) {
  alert("hi");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table class="table">
  <tr>
     <td><input class="show-output" type="button" value=261 /></td>
     <td>mhour test202</td>
  </tr>
  <tr>
     <td><input class="show-output" type="button" value=260 /></td>
     <td>mhour test145</td>
  </tr>
</table>

jQuery add click function to multiple input

1 Answers1