How to disable too many buttons on a foreach when you click a single button?

Question

I have a grid with a cleaning list to be done. Initially all buttons are green with the text "Start Cleaning". When I start a cleaning, this button is blue and the text changes to "Continue Cleaning".

Perfect, this is already working. I would like, as long as there is an open cleaning, that the other buttons are disabled, and turn back on only after the open cleaning is completed.

The idea is not to allow the user to start a cleaning without finishing the one that is open. Below the snippet of my code that is inside a foreach:

<tr style="background-color:<?php echo $corFundoSujoAgendado?>;color: <?php echo $corQuartoSujoAgendado; ?>">
    <td><center><?php echo $quartos["quarto"];  ?></center></td>
    <td><center><?php echo date("d/m/Y H:i",strtotime($quartos["solicitado_em"]));  ?></center></td>
    <td>
    <center>
        <?php if (count($limpezaEmAbertoPorIDLimpeza) > 0)  {?>
        <a  class='ui button fluid blue iniciarLimpeza' href="javascript:exibirLimpezaParaIniciar(<?php echo $idLimpezaQuartoSujoAgendado;  ?>);" ><span class="iniciar">Continuar limpeza</span>
                            &nbsp;&nbsp
                    </a>                                                                                            
        <?php } else { ?>
        <a  class='ui button fluid green iniciarLimpeza' href="javascript:exibirLimpezaParaIniciar(<?php echo $idLimpezaQuartoSujoAgendado;  ?>);" ><span class="iniciar">Iniciar Limpeza</span>
                            &nbsp;&nbsp
                    </a>
        <?php } ?>
    </center>                                                                            

    </td>

Answer 1

Good morning everyone! Thank you for your help. I got a simpler solution that I share with you below:

<script>    
    $(document).ready(function () 
    {        
            if ($(".continuarLimpeza").length == 0) 
            {
                $(".iniciarLimpeza").removeClass("disabled")
            } 
            else 
            {
                    $(".iniciarLimpeza").addClass("disabled")
                    $(".continuarLimpeza").removeClass("disabled")
            }
            return; 
    });
</script>

Answer 2

You can hear the changes with the change : https://api.jquery.com/change/ With this use jQuery to change the property

$("input"). prop('disabled', true)