Condition "if and Else" for sending Ajax, taking the text of the <span> tags?

Question

Kinda hard to explain by the title, but here’s the thing, I have a foreach that prints in a list <ul> <li> tags, and within it I have the following code:

<?php if ($row['Status'] == 'Em Processo'):?>                                   
   <span class="process badge" style="background-color:#67A6DF">Em Processo</span>                                  
<?php endif; ?>
<?php if ($row['Status'] == 'Teste'): ?>
   <span class="test badge" style="background-color:#FCB529">Em Teste</span>
<?php endif;?>
<?php if ($row['Status'] == 'Aprovada'):?>
   <span class="approve badge" style="background-color:#43A995">Aprovada</span>                                                         
<?php endif;?>

The idea is if it has a set status it prints what it is, but I have the following button:

<a href="javascript:void(0);" class="flex-icon approved" data-toggle="tooltip" data-placement="top" title="Aprovar" data="5"><i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i></a>

This changes the status setting, in this case clicking on it it will change the status to Approved, so inside the list it Munda the <span> along with the list.

But the question is, what hasn’t been tested yet, can’t be approved, but I can’t just take the class process of the first <span> and send in Ajax to not change.

Script:

$(document).ready(function() {
    $('.approved').on('click', function(){
        var process = $('.process').text();
            if(process != "Em Processo"){
                var hrefdata = $(this).attr("data");
                 var taskid = $(this).parent().parent().attr('id'); 
                    $.ajax({ 
                        url: './task.php', 
                        type: 'POST', 
                        data: { id: taskid, approved: hrefdata},
                        success: function(data) { 
                            window.location.reload();
                        }               
                    });//Ajax
            }else{
                alert('Está em processo não pode ser aprovado antes de enviar para teste');
            };//If
    });//Onclick
});

How do I get him to just read <span> with the process class and not set the same condition for the others?

Well with the reply of @Kirmayrtomaz I managed to solve my problem, but I had to make some changes to the code.

If I use:

    $(document).ready(function() {
    $('.approved').on('click', function(){
        var father = $(this).parent().parent();
        var taskid = $(father).attr('id');          
        var process = document.querySelectorAll("#" + taskid + " .process");    
            if($(process).text() != "Em Processo"){                 
                var hrefdata = $(this).attr("data");
                    $.ajax({ 
                        url: './task.php', 
                        type: 'POST', 
                        data: { id: taskid, approved: hrefdata},
                        success: function(data) { 
                            window.location.reload();
                        }               
                    });//Ajax
            }else{
                alert('Está em processo não pode ser aprovado antes de enviar para teste');
            };//If
    });//Onclick
});

I had to make the following change to the ID:

<li class="list-group-item id-task" id="<?php echo $row['TasksId'];?>"> ...

</li>

To:

<li class="list-group-item id-task" id="task<?php echo $row['TasksId'];?>"> ...

</li>

The following error is shown:

"Uncaught Syntaxerror: Failed to execute 'querySelectorAll' on 'Document': '#1 . process' is not a Valid selector."

To remove the word "task" from the ID I had to put the following code

$idtaskapproved = strip_tags($_POST['id']);    
$substrid = substr ($idtaskapproved, 4);

That takes the first 4 POST strings I’m getting.

Look it turned ugly but it worked.

If anyone had any idea how to make this ugly thing better.

Answer 1

Based on what you said to change the span. First define a parent that is both for the approved how much for process. In the example I did put the div with the class=taskid then it works as follows

1. When the user clicks . Approved you will have to look for his father $(this).parent().parent();
2. Once you have the father, just look for the son inside the branches. document.querySelectorAll("#" + taskid + " .process")
3. Once you’ve got the son, you can make the change only in him.

$(document).ready(function() {
  $('.approved').on('click', function() {
    //pegando o pai certo
    var father = $(this).parent().parent();
    var taskid = $(father).attr('id');
    
    //pegando o processo certo 
    var process = document.querySelectorAll("#" + taskid + " .process")
      
    if ($(process).text() != "Em Processo") {
     
      var hrefdata = $(this).attr("data");
     //Após sucess da função ajax
          //alterando de processo para approve
          $(process).removeClass("process")
          $(process).addClass("approve").css({
            "background": "#43A995"
          }).text("Aprovada")
 
    } else {
      alert('Está em processo não pode ser aprovado antes de enviar para teste');
    }; //If
  }); //Onclick
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
<div class="taskid" id="atividade1">
  <div class="task">
    <span class="process badge" style="background-color:#FCB529F">Em Teste</span> 

    <a href="javascript:void(0);" class="flex-icon approved" data-toggle="tooltip" data-placement="top" title="Aprovar" data="5"><i class="fa fa-check-square-o fa-2x" aria-hidden="true">Aprovar</i></a>
  </div>

</div>

<div class="taskid" id="atividade2">
  <div class="task">
    <span class="process badge" style="background-color:#67A6DF">Em Processo</span> 

    <a href="javascript:void(0);" class="flex-icon approved" data-toggle="tooltip" data-placement="top" title="Aprovar" data="5"><i class="fa fa-check-square-o fa-2x" aria-hidden="true">Aprovar</i></a>
  </div>

</div>