Создание корзины покупок с помощью Javascript

Question

Я пытался создать корзину с помощью javascript / jQuery.Моя проблема в моей логике, не работают в кодах.См. Мой код.

<ul class="list-guides row">
          <li class="col-xl-4 col-lg-4 col-md-6 col-12">
            <div class="item">
              <a href="#" class="select">
                <img src="img/icon/icon_guia_competencias.png" width="146" height="206" alt="Competência Gerais na BNCC" class="img-fluid" />
              </a>
              <p class="title">Competência Gerais na BNCC</p>
              <p class="unit">Valor Unitário: R$17</p>
              <p class="subs">Assinantes: R$9.90</p>
              <div class="quantity">
                <button class="plus-btn add" type="button" name="button">+</button>
                <input type="text" name="number" value="1" class="number" />
                <button class="minus-btn add" type="button" name="button">-</button>
              </div>
            </div>
          </li>
          <li class="col-xl-4 col-lg-4 col-md-6 col-12">
            <div class="item">
              <a href="#" class="select">
                <img src="img/icon/icon_guia_infantil.png" width="146" height="206" alt="Educação Infantil na BNCC" class="img-fluid" />
              </a>
              <p class="title">Educação Infantil na BNCC</p>
              <p class="unit">Valor Unitário: R$17</p>
              <p class="subs">Assinantes: R$9.90</p>
              <div class="quantity">
                <button class="plus-btn add" type="button" name="button">+</button>
                <input type="text" name="number" value="1" class="number" />
                <button class="minus-btn add" type="button" name="button">-</button>
              </div>
            </div>
          </li>
          <li class="col-xl-4 col-lg-4 col-md-6 col-12">
            <div class="item">
              <a href="#" class="select">
                <img src="img/icon/icon_guia_linguaportuguesa.png" width="146" height="206" alt="Língua Portuguesa na BNCC" class="img-fluid" />
              </a>
              <p class="title">Língua Portuguesa na BNCC</p>
              <p class="unit">Valor Unitário: R$17</p>
              <p class="subs">Assinantes: R$9.90</p>
              <div class="quantity">
                <button class="plus-btn add" type="button" name="button">+</button>
                <input type="text" name="number" value="1" class="number" />
                <button class="minus-btn add" type="button" name="button">-</button>
              </div>
            </div>
          </li>
        </ul>

Это мой список продуктов, и у меня есть javascript, где я пытался взять элементы, где пользователь активирует "li".

$('.list-guides .select').on('click', function() {
$(this).parent().toggleClass('active');

if($(this).parent().hasClass('active')){

  var $title = $('.active').find('.title').text();
  alert($title);
  var $preco = 9.90;
  alert($preco);
}
  return false;
});

Теперь у меня есть корзина, в которой я понятия не имею, как задать переменные.

<div class="details">
          <div class="content-details">
          <p class="title">Detalhes da Compra</p>
          <div class="content">
            <div class="product">
              <p class="name"><span class="font-weight-bolder">1x</span> Competências Gerais na BNCC - R$17</p>
              <hr/>
              <div class="container">
                <div class="row">
                  <!--frete-->
                  <div class="col-xl-6 col-lg-6 col-md-6 col-6">
                    <p class="field">Frete:</p>
                  </div>
                  <div class="col-xl-6 col-lg-6 col-md-6 col-6">
                    <p class="shipp float-right">Grátis</p>
                  </div>
                </div>
                <!--fim frete / início desconto-->
                <div class="row">
                  <div class="col-xl-6 col-lg-6 col-md-6 col-6">
                    <p class="field">Desconto:</p>
                  </div>
                  <div class="col-xl-6 col-lg-6 col-md-6 col-6">
                    <p class="discount float-right">-R$7.10</p>
                  </div>
                </div>
                <!--fim desconto / início Total-->
                <div class="row row-total">
                  <div class="col-xl-6 col-lg-6 col-md-6 col-6">
                    <p class="field font-weight-bolder">Total:</p>
                  </div>
                  <div class="col-xl-6 col-lg-6 col-md-6 col-6">
                    <p class="total float-right">R$9.90</p>
                  </div>
                </div>
                <div class="row row-next">
                  <div class="col-xl-12 col-lg-12 col-md-12 col-12">
                    <p class="field-btn text-center"><a href="#" class="button" target="_blank">Prosseguir</a></p>
                  </div>
              </div>
            </div>
            <p class="no-product text-center">Nenhum produto selecionado</p>
          </div>
        </div>
      </div>
    </div>

Как мне решить эту проблему?