JSFiddle - React, Tailwind, and code Playground

by Anwar Hussain

HTML

<ul></ul>
<p>Total Price: <span id="payment-amount">0</span>

</p>
<div class="purchase-car">
    <select>
        <option value="volvo" data-price="10">Volvo ( $10 )</option>
        <option value="saab" data-price="20">Saab ( $20 )</option>
        <option value="mercedes" data-price="10">Mercedes ( $10 )</option>
        <option value="audi" data-price="30">Audi ( $30 )</option>
    </select>
    <input type="number" name="quantity" value="1">
    <button type="submit">Add</button>
    </form>

JavaScript

var vehicles = new Array;

$('.purchase-car').on('click', 'button', function (event) {
    event.preventDefault();
    /* Act on the event */
    var carName = $('.purchase-car select').val();
    var carPrice = parseInt($('.purchase-car select').find(':selected').data('price'));
    var carQuantity = parseInt($('.purchase-car input[name="quantity"]').val());
    var totalPrice = carPrice * carQuantity;

    var currentValue = parseInt($("#payment-amount").html());

    $("#payment-amount").html(currentValue + totalPrice);
    vehicles.unshift({
        price: carPrice,
        quantity: carQuantity
    });


    var orderToAdd = '<li>' + carName + ' ' + carQuantity + ' - <span>remove</span></li>';

    $('ul').prepend(orderToAdd);
});

$("ul").on("click", "li span", function () {
    var index = $(this).parent().index();
    var currentValue = parseInt($("#payment-amount").html());
    var removeValue = vehicles[index]['price'] * vehicles[index]['quantity'];
    $("#payment-amount").html(currentValue - removeValue);
    vehicles.splice(index, 1);
    $(this).parent().remove();
});