изменить текст кнопки в JS / jQuery после завершения процесса в php

Question

Я работаю над кодом JQuery / AJAX, как показано ниже, который вызывает скрипт convert.php.

   jQuery(document).ready(function($)
   {
    $('.go-btn').click(function()
    {   
        let target = $(this).attr('data-id'),
            spanEl = $('.file-name[data-id='+ target +']');

        $.ajax({
            url: 'convert.php',
            type: 'POST',
            data: {id: target}, //change to what you want
            success: function(res)
            {
                console.log("Tested");
            },
            error: function(res)
            {

            }
        })
    })  
   });  

В convert.php происходит конвертирование mp4 в mp3. После завершения преобразования на консоли печатается Tested .

Постановка задачи:

Мне интересно, какие изменения я должен внести в код jQuery / AJAX выше, чтобы после завершения преобразования текст кнопки, принадлежащий приведенному ниже HTML-коду, изменился на Завершено

Приведенный выше код jQuery / AJAX вызывается нажатием кнопки. Вот фрагменты HTML-кода, принадлежащего кнопке:

HTML код:

  <?php  foreach ($programs as $key => $program) {  ?> 
       <tr data-index="<?php echo $key; ?>">
          <td><input type="submit" name="go-button" value="Go" data-id="<?php echo $key; ?>" ></input></td>
       </tr>
  <?php }?>

Answer 1

Это просто вопрос захвата кнопки, на которую нажали:

jQuery(document).ready(function($) {
  $('.go-btn').click(function() {
    let target = $(this).attr('data-id'),
      spanEl = $('.file-name[data-id=' + target + ']');
    // Capture the element that received the event
    let btn = this;
    $(btn).val("Converting").prop('disabled', true).css({
      'text-align': 'center',
      'border-color': '#000',
      'width': '120px'
    });
    $.ajax({
      url: 'https://api.myjson.com/bins/80dex',
      method: 'GET', // Change this back to POST
      data: {
        id: target
      }, //change to what you want
      success: function(res) {
        $(btn).val("Completed")
      },
      error: function(res) {
        $(btn).prop('disabled', false).val("Go").removeAttr('style');
      }
    })
  })
});

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