JSFiddle - React, Tailwind, and code Playground

by imiguelsalcedo

HTML

<section id="planes">
  <div class="container">
    <div class="row">
      <div class="col-sm-10 col-md-8">
        <h2>Planes & Precios</h2>
        <ul class="precioz">
          <li>
            <a class="cambiar-precios btn-index" data-mesdesc1="1.45$" data-sm="USD" data-link="usd"> Dólares</a>
          </li>
          <li>
            <a class="cambiar-precios btn-index" data-mesdesc1=4.633.600 data-sm="CLP" data-link="clp"> Bolívares</a>
            </li>
           <li> <a class="cambiar-precios btn-index" data-mesdesc1=4.0 data-sm="CLP" data-link="pen"> Soles</a>
          </li>
        </ul>
      </div>
    </div>
    <!--end of row-->
  </div>
  <!--end of container-->
</section>
<section class=" bg--slider space--xs">
  <div class="container">
    <div class="row">
      <div class="col-sm-3 col-xs-11">
        <div class="pricing pricing-1 boxed padding0 boxed--border  bg--secondary">
          <div class="text-center">
            <h4 class="bg--primary">Personal</h4>
            <span class="h2"><small>Bs.</small><strong><precio class="mesdesc1">4.55.55</precio><span>/mes</span></strong>
            </span>
            <a class="btn link" href="/id-usd.shtml"> <span class="btn__text"><br>
                            Ordenar ahora
                        </span> </a>
          </div>
          
          </ul>
        </div>
      </div>

    </div>

  </div>
</section>

JavaScript

$(function() {
  $("a.cambiar-precios").on("click", function(e) {
    // Personal
    $("precio.anual1").text($(this).data("anual1"));
    $('precio.mesdesc1').text($(this).data("mesdesc1"));
    $('precio.b1').text($(this).data("b1"));
    

    $('small').text($(this).data("sm"));

    var newHref = $('a.btn.link').attr("href").replace(/usd|clp|pen/, $(this).data("link"));
    $('a.btn.btn.link').attr("href", newHref);
    
    
    var newFlag = $('img.flag').attr("src").replace(/ve|us/, $(this).data("flag"));
    $('img.flag').attr("src", newFlag);

  });
});