JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<div class="data">
    <form action="/b/" method="post" id="choseLessor">
      <fieldset>
        <ul>
          <li><span class="rate">&euro; 21,60</span><span class="note">starting at</span> 
           <input type="radio" class="styled" name="days" value="30" data-price="21.60"/><b>days</b>
           <input type="hidden" name="msrp" value="70.50" />
           <input type="hidden" name="userLocale" value="nl" />
          </li>

          <li><span class="rate">&euro; 24,00</span> <span class="note">starting at</span>
           <input type="radio" class="styled" name="days" value="60" data-price="24.00"           
              checked="checked" /><b>60 days</b>
           </li>

          <li><span class="rate">&euro; 26,40</span> <span class="note">starting at</span> 
           <input type="radio" class="styled" name="days" value="90" data-price="26.40" />
              <b>90 days</b>
          </li>
            
          <li><span class="rate">&euro; 27,60</span> <span class="note">starting  at</span>
             <input type="radio" class="styled" name="days" value="120" data-price="27.60" />
              <b>120 days</b>
          </li>
        </ul>

        <div class="priceCalculation">
          <div class="list">
            <span class="type">List Price:</span>

            <div class="strikethrough">
              <span class="retailPriceActual">&euro; 70,50</span>
            </div>
          </div>

          <div class="savings">
            <span class="type">Your Savings:</span> <span class="bookSavings" id=
            "CalculateSavings">&euro; 46,50</span>
          </div>

          <div class="total">
            <span class="type bigger">Your Rent Price:</span> <span class="totalPrice"
            id="CalculatePrice">&euro; 24,00</span>
          </div>
        </div><input type="submit" value="Cho" class="btn" />
      </fieldset>
        
    </form>
  </div>

JavaScript

$( document ).ready(function() {
    console.log ( 'Function loaded' );
    $("input[name=days]:radio").change(function () {  
    	console.log ( 'Days recognized' );
        // get values
        var savingPrice = 0;
        var msrp = $('input[name="msrp"]').val();
        var periodPrice = $('input[name="days"]:checked').data('price');
        var userLocale = $('input[name="userLocale"]').val();
        
        console.log ( 'UserLocale' + userLocale);
        
        // calculate bac
            savingPrice = (msrp-periodPrice).toFixed(2); 

        if(userLocale === 'nl')
        {   
            savingPrice = savingPrice.replace(/\./g, ',');
            periodPrice = periodPrice.replace(/\./g, ',');
        }
           
        $('#CalculateSavings').text('&euro; ' + savingPrice);
        $('#CalculatePrice').text('&euro; ' + periodPrice);
    });
});