Javascript add-on help

Question

I have that code: Jsfiddle.
It works like this:

Has a tab with three menus: Option 01, Option 02, Option 03.

And in the contents of these tabs there are some < li >.

Option 01 has a < p >: 677.81
Option 02 has two < p >: 569.81 and 642.71
Option 03 has a < p >: 677.81

And in every option one of the < li > has a selected id.
And I need the code to take the values that are in the < p> tag of all < li> that have the id selected and display the sum of these values in the input.

677,81 + 569,81 + 677,81 = 1925,43

And when you click select it changes the value ex: If he selects the second read of option 2 he removes the selected id from the one he selected first < li> and adds the selected id to the one he selected and changes the values.

You have selected the first Option 01, the second Option 02 and the first Option 03

677,81 + 642,71 + 677,81 = 1998,33

And so on and so forth.

An easier explanation to understand: 3 families go to a hotel and each one can only choose 1 room. For the 1st and 3rd family only 1 room is available and they choose this already for the 2nd 2 rooms is available and she chooses 1 of them. Ai the code takes the price of the rooms that were chosen in the case 3 rooms and add up the prices and displays in the input. And if the 2nd family chooses another room it takes the price of the 2 rooms of the family 1 and 2 and sum with the price of the new room chosen by the family 2.

Answer 1

First step: change your script to somehow mark the selected item. I advise applying a class over the selected item.

.conteudo li.sel a {
    color: #4682B4;
    background: #fff;
    border: 1px solid #4682B4
}

var linhas = $('.conteudo li');
$('a', linhas).click(function() {
  var self = $(this);
  var linha = self.parent();
  linha.toggleClass("sel");
  self.text(linha.hasClass("sel") ? "Remover" : "Selecionar");
});

once you are selected, just add them up.:

var linhas = $('.conteudo li');
var total = 0;
linhas.filter(".sel").each(function () {
  var elem = $('p', this);
  total += parseFloat(elem.text().replace(".", "").replace(",", "."));
});

the last step is to assign the value to the input.:

var intl = Intl.NumberFormat("pt-BR", { style: 'currency', currency: 'BRL' })
var dado = $('#dado');
dado.val(intl.format(total));

Follow the full example.:

$(document).ready(function() {
  filtraServico($('#listaServicos li:eq(0)').attr('class'));
  
  // CODIGO COMEÇA AQUI //
  var intl = Intl.NumberFormat("pt-BR", { style: 'currency', currency: 'BRL' })
  var dado = $('#dado');
  var linhas = $('.conteudo li');
  $('a', linhas).click(function() {
    var self = $(this);
    var linha = self.parent();
    linha.toggleClass("sel");
    self.text(linha.hasClass("sel") ? "Remover" : "Selecionar");

    var total = 0;
    linhas.filter(".sel").each(function () {
      var elem = $('p', this);
      total += parseFloat(elem.text().replace(".", "").replace(",", "."));
    });
    dado.val(intl.format(total));
  });
});
function filtraServico(classe){    
  $('#listaServicos li').hide();
  $('#listaServicos li.' + classe).show();
  return false;
}

body {
  font-family: Arial;
  margin: 0;
}

a, a:hover, a:active { text-decoration: none; color: #fff; }

.opcoes {
  list-style: none;
  margin: 0; padding: 0 40px;
  background: #4682B4;
  color: #FFFFFF;
}

.opcoes li {
  display: inline-block;
  padding: 10px 15px;
}

.opcoes li.sel {
  border-bottom: 4px solid #1d324a;
}

.conteudo {
  background: #ececec;
}

.conteudo ul {
  margin: 0; padding: 0;
  list-style: none;
}

.conteudo ul li {
  padding: 10px 40px;
}

.conteudo ul li:nth-child(2n+0) {
  background: #fff;
}

.conteudo p { margin:0; padding:0; }


.conteudo li a {
    color: #fff;
    float: right;
    margin: -24px 0 0 0; padding: 5px 8px;
    background: #4682B4;
    border-radius: 3px;
    box-sizing: border-box;
    text-align: center;
    width: 100px;
}

.conteudo li.sel a {
    color: #4682B4;
    background: #fff;
    border: 1px solid #4682B4
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="opcoes">
  <a href="#" onclick="return filtraServico('op01');"><li class="sel">Opção 01</li></a>
  <a href="#" onclick="return filtraServico('op02');"><li>Opção 02</li></a>
  <a href="#" onclick="return filtraServico('op03');"><li>Opção 03</li></a>
</ul>

<div class="conteudo">
  <ul id="listaServicos">
    <li class="op01" id="selecionado">
      <p class="insert">677,81</p>
      <a href="#" >Selecionar</a>
    </li>

    <li class="op02" id="selecionado">
      <p class="insert">569,81</p>
      <a href="#" >Selecionar</a>
    </li>
    <li class="op02">
      <p class="insert">642,71</p>
      <a href="#" >Selecionar</a>
    </li>

    <li class="op03" id="selecionado">
      <p class="insert">677,81</p>
      <a href="#" >Selecionar</a>
    </li>
  </ul>
</div>

<hr />
<p>Valor total será colocado aqui:</p>
<input type="text" name="dado" id="dado" />