如何更改属于 JS/jQuery 中特定行的按钮文本？

Question

我正在处理如下所示的html/php 代码，其中单击按钮时，我想将Go按钮文本更改为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 }?>

此时，我在 UI 上有 2 行。下面是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>

这是我尝试过的，但还需要做更多的工作。

 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. 

} 

问题陈述：

我想知道我应该在上面的JS 代码中进行哪些更改，以便在单击按钮时，属于特定行的按钮内的文本应该从Go更改为Converting。