JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-bg" class="main-img">
    <img src="images/house.jpg" width="100%">
</div>
<div id="main-ppa" class="main-img">
    <img src="images/house-paved-patio.png" width="100%">
</div>
<div id="main-gar" class="main-img">
    <img src="images/house-garage.png" width="100%">
</div>
<div id="main-cpo" class="main-img">
    <img src="images/house-covered-porch.png" width="100%">
</div>
<div id="main-cpa" class="main-img">
    <img src="images/house-covered-patio.png" width="100%">
</div>
<div style="clear:both"></div>
<div id="estimate"></div>
<script>
    document.getElementById("estimate").innerHTML = "Your estimated total is $" + calculate_total('main-ppa', 'main-cpa', 'main-cpo', 'main-gar');
</script>

CSS

#main-ppa {
    display:none;
}
#main-gar {
    display:block;
}
#main-cpo {
    display:block;
}
#main-cpa {
    display:none;
}

JavaScript

function calculate_total(ppa, cpa, cpo, gar) {
    var tot_price = 279500;
    var a = document.getElementById(ppa);
    if (a.style.display == 'block') var ppa_tot = 1000;
    var b = document.getElementById(cpa);
    if (b.style.display == 'block') var cpa_tot = 5000;
    var c = document.getElementById(cpo);
    if (c.style.display == 'block') var cpo_tot = 6000;
    var d = document.getElementById(gar);
    if (d.style.display == 'block') var gar_tot = 9000;
    var estimate = tot_price + ppa_tot + cpa_tot + cpo_tot + gar_tot;
    return estimate();
}