Problem calculating and displaying price (R$) per person

Question

I’m having a problem calculating and displaying the price in R$ per person in a table.

In the HTML below, we have the number of people and a table, in this table we have the plan price and a blank field <p class="pax-number"></p> where you should display the price per person.

It seemed simple until then, I used every <p class="preco-plano"></p> to make a loop and turn the values into numbers, calculate with the number of people and change the text, but it’s not so simple... See the example below:

$(document).ready( ()=> {
            //seleciona a quantidade de pessoas e transforma em um numero inteiro
            let paxNumber = parseInt(($(".pessoas .field-title").text()).split(" ")[0]);
            $('.preco-plano').each( ()=> {
                //seleciona o preço do plano e transforma em um numero inteiro
                let priceNumber = parseInt($(this).text().split('$')[1]);
                //calcula o preço por pessoa
                let pricePerPerson = priceNumber / paxNumber;
                //seleciona o campo onde deve ser exibido o valor por pessoa e escreve
                $(this).closest('p').find('.pax-number').html('R$' + pricePerPerson + 'por pessoa');
            });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="pessoas">
        <span class="field-title">4 pessoas</span>
    </div>
    
    <table class="tabela-resultados">  
        <tr class="">
           <td class="bloco-preco" style="height: 180px;">
              <p class="nome-plano">Plano Tal</p>
              <span>
                 <p class="desconto">R$555,00</p>
                 <p class="preco-plano">R$316</p>
                 <p class="pax-number" style="color: green; font-size: 10px;"></p>
              </span>
           </td>
        </tr>
        <tr class="">
            <td class="bloco-preco" style="height: 180px;">
                <p class="nome-plano">Plano XYZ</p>
                <span>
                    <p class="desconto">R$555,00</p>
                    <p class="preco-plano">R$420</p>
                    <p class="pax-number" style="color: green; font-size: 10px;"></p>
                </span>
            </td>
        </tr>
        <tr class="">
            <td class="bloco-preco" style="height: 180px;">
                <p class="nome-plano">Plano Cucurioso</p>
                <span>
                    <p class="desconto">R$555,00</p>
                    <p class="preco-plano">R$188</p>
                    <p class="pax-number" style="color: green; font-size: 10px;"></p>
                </span>
            </td>
        </tr>
        
     </table>
     <script src="jquery-3.2.1.min.js"></script>

I believe the problem is when I select the value and turn it into an integer number let paxNumber = parseInt(($(".pessoas .field-title").text()).split(" ")[0]); because he doesn’t give me a number, if I have to use the dial $('.preco-plano') instead of $(this) It returns me a Nan because it takes not only the value of that block, but of all the blocks in the table. I tried to do something similar using the for but unsuccessfully too.

Someone could shed some light on what I’m doing wrong?

Thank you in advance!

Answer 1

2 problems in the code:

1) The .each jQuery does not accept $(this) with Arrow Function:

Or do you use function() with $(this) or takes the second argument (which is the loop element) using Arrow Function:

With Arrow:

$('.preco-plano').each( (i,e)=> {
    //seleciona o preço do plano e transforma em um numero inteiro
    let priceNumber = parseInt($(e).text().split('$')[1]);
    //calcula o preço por pessoa
    let pricePerPerson = priceNumber / paxNumber;
    //seleciona o campo onde deve ser exibido o valor por pessoa e escreve
    $(e).closest('span').find('.pax-number').html('R$' + pricePerPerson + 'por pessoa');
});

Where in (i,e), the i is the index of the element and e own element.

With Function:

$('.preco-plano').each( function() {
    //seleciona o preço do plano e transforma em um numero inteiro
    let priceNumber = parseInt($(this).text().split('$')[1]);
    //calcula o preço por pessoa
    let pricePerPerson = priceNumber / paxNumber;
    //seleciona o campo onde deve ser exibido o valor por pessoa e escreve
    $(this).closest('span').find('.pax-number').html('R$' + pricePerPerson + 'por pessoa');
});

2) The .closest('p') is wrong. Right would be .closest('span'), because the span who is the father of p where you selected the class .preco-plano.

Code (with Arrow):

$(document).ready( ()=> {
   //seleciona a quantidade de pessoas e transforma em um numero inteiro
   let paxNumber = parseInt(($(".pessoas .field-title").text()).split(" ")[0]);
   $('.preco-plano').each( (i,e)=> {
       //seleciona o preço do plano e transforma em um numero inteiro
       let priceNumber = parseInt($(e).text().split('$')[1]);
       //calcula o preço por pessoa
       let pricePerPerson = priceNumber / paxNumber;
       //seleciona o campo onde deve ser exibido o valor por pessoa e escreve
       $(e).closest('span').find('.pax-number').html('R$' + pricePerPerson + 'por pessoa');
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pessoas">
        <span class="field-title">4 pessoas</span>
    </div>
    
    <table class="tabela-resultados">  
        <tr class="">
           <td class="bloco-preco" style="height: 180px;">
              <p class="nome-plano">Plano Tal</p>
              <span>
                 <p class="desconto">R$555,00</p>
                 <p class="preco-plano">R$316</p>
                 <p class="pax-number" style="color: green; font-size: 10px;"></p>
              </span>
           </td>
        </tr>
        <tr class="">
            <td class="bloco-preco" style="height: 180px;">
                <p class="nome-plano">Plano XYZ</p>
                <span>
                    <p class="desconto">R$555,00</p>
                    <p class="preco-plano">R$420</p>
                    <p class="pax-number" style="color: green; font-size: 10px;"></p>
                </span>
            </td>
        </tr>
        <tr class="">
            <td class="bloco-preco" style="height: 180px;">
                <p class="nome-plano">Plano Cucurioso</p>
                <span>
                    <p class="desconto">R$555,00</p>
                    <p class="preco-plano">R$188</p>
                    <p class="pax-number" style="color: green; font-size: 10px;"></p>
                </span>
            </td>
        </tr>
        
     </table>