JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<header>
    <h1>Digital Calculator</h1>
	<p>Let's work out what this might cost</p>
    </header>
    
    <section>
    	<h2>Setup</h2>
		<p>Standard set up fees, you're not getting out of these.</p>
        <ul>
        	<li class="overhead">
                <div class="wrap delete">
                    <h3>Overhead</h3>
                    <p>It's the overhead cost. Look up - it's right there!</p>
                </div>
            </li>
            <li class="acquisition">
            	<div class="wrap add" id="aqstn">
                    <h3>Client Acquisition</h3>
                    <p>'Cause there's no such thing as a free lunch.</p>
                </div>
            </li>
        </ul>
    </section>
    
    <section>
    	<h2>The Bottom Line</h2>
		<p>Guideline pricing uses a 15% cost variant.</p>
        <p class="price"><span class="less">0</span> - <span class="more">0</span></p>
    </section>    
        
</div>

JavaScript

// PRICING VARIABLES //
// Base price
var base = 0;

// SETUP //
// Setup - Overhead
var ovrhead = 750;
// Setup - Client Acquisition
var aqstn = 236;




// Some maths to get +- 15%
var fifteen = (base*.15)
var price1 = (base+fifteen)
var price2 = (base-fifteen)

// This is to add
$('.add').click(function() {
		
		whatIsIt = $(this).attr('id');
		alert (whatIsIt);
		base = (base+(whatIsIt));
		// Some maths to get +- 15%
		fifteen = (base*.15)
		price1 = (base+fifteen)
		price2 = (base-fifteen)

		$(".price span.more").html(price1);
		$(".price span.less").html(price2);
});