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:none;
}

JavaScript

function calculate_total(ppa, cpa, cpo, gar) {
    var estimate = 0;
    if (getDisplay(document.getElementById(ppa)) == 'block') {
        estimate += 1000;
    }
    if (getDisplay(document.getElementById(cpa)) == 'block') {
        estimate += 5000;
    }
    if (getDisplay(document.getElementById(cpo)) == 'block') {
        estimate += 6000;
    }
    if (getDisplay(document.getElementById(gar)) == 'block') {
        estimate += 9000;
    }
    return estimate;
}

function getDisplay(element)
{
return element.currentStyle ? element.currentStyle.display :
                          getComputedStyle(element, null).display;
}

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