"if and else" condition for sending Ajax, taking text from span tags?

It's kind of hard to explain by title, but it's the following, I have a foreach that prints in a <ul> tags list, and inside 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 defined 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 definition of status, in this case clicking on it will change the status to Approved, then within the list it changes the <li> along with the list.

But the question is, what has not been tested yet, can not be approved, but I can not just get 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 it to just read <span> with the process class and not put the same condition to the others?

Well with the response from @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 displayed:

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.

Looks like it was ugly but it worked.

If anyone had any idea to improve this ugly thing.