How to establish real-time communication browser and server in php?

I am working on AJAX code which calls convert.php script where conversion of mp4 => mp3 happens using system command.

   jQuery(document).ready(function($)
   {
    $('.converter').click(function()
    {   
        let target = $(this).attr('data-id'),
            spanEl = $('.file-name[data-id='+ target +']');
        let btn = this;
        $(btn).val("Converting").prop('disabled', true);   // Line A
        $.ajax({
            url: 'convert.php',
            type: 'POST',
            data: {id: target}, 
            success: function(res)
            {
                 $(btn).val("Completed").prop('disabled', true);  // Line B
            },
            error: function(res)
            {
                alert('Broken!')
            }
        })
    })
   });  

=> Line A change button text from Go to Converting (meaning conversion is in process).
=> Line B tells that the conversion is Completed (and the converting text gets change to Completed).

Problem Statement:

Everything is working perfectly fine. The problem is that now when I refresh the page/or open the same webpage on different machine the text Go comes back again for the files which is already converted/or in process which is not I want.

The activity should remain the same when I open the webpage on different machines or refresh the page.

The HTML code (UI) from where the jQuery code is called:

<td><input type="submit"  value="Go" data-id="<?php echo $key; ?>" class="converter btn btn-outline-primary"></input>
</td>

from How to establish real-time communication browser and server in php?