JSFiddle - React, Tailwind, and code Playground

HTML

<section class="section">
        <div class="container">
            <p class="h1 text-center">Калькулятор расчета стоимости услуг</p>
            <div class="small-line"></div>
            <div class="row price">
                <div class="col-md-4 col-md-offset-4">
                    <div class="list-group calculator">
                        <div class="list-group-item name-price"><h3>Стоимость печати</h3></div>
                        <div class="list-group-item box-price">
                            <div class="box-filter" data-price="1000">
                                <div class="form-group">
                                    <label>Площадь фотообоев</label>
                                    <div class="row">
                                        <div class="col-md-4" style="padding-top: 14px;">В метрах:</div>
                                        <div class="col-md-3"><input type="text" name="roof" class="form-control" id="roof" value="" placeholder="0">   ш</div>
                                        <div class="col-md-3"><input type="text" name="roof1" class="form-control" id="roof1" value="" placeholder="0">  в</div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Материал</label>
                                    <ul class="parametrs" id="pol">
                                        <li class="label label-default" data-param="1">Бумажные фотообои с ПВХ покрытием (текстура "под иней")</li>
                                        <li class="label label-default" data-param="1.1">Бумажные фотообои с ПВХ покрытием (текстура "под древний папирус")</li>
                                        <li class="label label-default" data-param="1.2">Бумажные фотообои с ПВХ покрытием (текстура "под текстиль")</li>
                                        <li class="label label-default" data-param="1.4">Бумажные...

JavaScript

$(document).ready(function () {
    $('.price-button').click(function() {
        var boxPrice = $(this).closest('.col-md-4');
        function hideButton () {
            $(boxPrice).find('.price-button').hide();
            $(boxPrice).find('.footer-price').append('<h4>Итог: <span class="cur"></span> <span class="rub">р. </span></h4>');
        };
        $(boxPrice).find('.box-price').animate({height: '550px'}, {'duration': 500}, {'easing': 'linear'}, hideButton());
    });
    $('ul.parametrs li').click(function() {
        var listParam = $(this).closest('ul.parametrs');
        $(listParam).find('li.check-param').removeClass('check-param');
        var elemParam = $(this);
        $(elemParam).addClass('check-param');
        var elemAttr = $(elemParam).attr('data-param');
    });
    function valParam () {
        var Price = $('.box-filter').attr('data-price');
        var roofValue = $('#roof').val();
        var roofValue1 = $('#roof1').val();
        var roofValue2 = roofValue * roofValue1;
        var paramValuePol = $('#pol').find('li.check-param').attr('data-param');
        var paramValueSteny = $('#steny').find('li.check-param').attr('data-param');/
        if ($.isNumeric(roofValue2)) {
            if (!$.isNumeric(roofValue2)) roofValue2 = 1;
            if (!$.isNumeric(paramValuePol)) paramValuePol = 1;
            if (!$.isNumeric(paramValueSteny)) paramValueSteny = 0;
            var total = Price * roofValue2 * paramValuePol + paramValueSteny;//формула расчета общей стоимости
            var newTotal = Math.round(total);//округление
            $('.cur').html(newTotal);
            $('.rub').show();
        };
    };
    $('.calculator').on('click keyup', valParam);
})