How to change button text belonging to a particular row in JS/jQuery?

Question

I am working on html/php code as shown below in which on click of button, I want to change the Go button text to Converting.

<?php  foreach ($programs as $key => $program) {  ?> 
   <tr data-index="<?php echo $key; ?>">
      <td><input style="text-align:center; width:90px;"  onclick="change()" type="submit"  id="go-btn" name="go-button" value="Go" data-id="<?php echo $key; ?>" ></input></td>
   </tr>
<?php }?>

At this moment, I have 2 rows at UI. Below is the code on inspect:

<tr data-index="0">
   <td><input onclick="change()" type="submit" id="go-btn" name="go-button" value="Go" data-id="0" class="go-btn btn btn-outline-primary">
   </td>
</tr>

<tr data-index="1">
   <td><input onclick="change()" type="submit" id="go-btn" name="go-button" value="Go" data-id="1" class="go-btn btn btn-outline-primary">
   </td>
</tr>

This is what I have tried but more need to be done.

 function change() 
{
    var elem = document.getElementById("go-btn");
    var attribute = elem.getAttribute('data-id');
    console.log(attribute);  // It will print 0 everytime as it is taking the data-id value in the document. 
} 

Problem Statement:

I am wondering what changes I should make in the JS code above so that on click of button, the text inside the button belonging to particular row should change from Go to Converting.

Answer 1

You can add a click event listener to inputs with the name go-button. If you change the .val then this changes the text displayed to the user. I have also disabled the buttons after they are clicked, as I imagine this is the expected behaviour in your case (i.e. the user has to wait for the conversion to be completed).

Once completed you can re-enable the button if necessary with .attr("disabled", "false")

N.B. id should be unique, so you should try and change the id for your buttons if possible.

---

Demo

// Add click event to the inputs with class .go-button
$("input[name='go-button']").click( function() {

  // Change the text of the button, and disable
  $(this).val("Converting").attr("disabled", "true");
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr data-index="0">
   <td><input type="submit" id="go-btn" name="go-button" value="Go" data-id="0" class="go-btn btn btn-outline-primary">
   </td>
</tr>

<tr data-index="1">
   <td><input type="submit" id="go-btn" name="go-button" value="Go" data-id="1" class="go-btn btn btn-outline-primary">
   </td>
</tr>