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>

CSS

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

JavaScript

function getDisplay(id) {
    var element = document.getElementById(id);
    return element.currentStyle 
            ? element.currentStyle.display
            : getComputedStyle(element, null).display;
}

function calculate_total(ppa, cpa, cpo, gar) {
    var estimate = 279500;
    if(getDisplay(ppa) !== 'none') {
        estimate += 1000;
    }
    if(getDisplay(cpa) !== 'none') {
        estimate += 5000;
    }
    if(getDisplay(cpo).display !== 'none') {
        estimate += 6000;
    }
    if(getDisplay(gar) !== 'none') {
        estimate += 9000;
    }
    return estimate;
}

document.getElementById("estimate").innerHTML = "Your estimated total is $" + calculate_total('main-ppa', 'main-cpa', 'main-cpo', 'main-gar');