JSFiddle - React, Tailwind, and code Playground

HTML

<div class="houseStatusContainer">
    <ul id="specs">
        <li class='header'>The House</li>
    </ul>
</div>
<p>
    Some back story. A house is currently visited by a home inspector. His duty is to report on some properties of the house. It appears that the house has some problems, which is why visits from different kinds of tradesmen are required.
</p>
<div class="step1 steps">
    <p> Start by getting the inspector to list all the house properties and its status</p>
    <input type="button" class="display" value="Check house properties" />
</div>
    
<div class="step2 steps">
    <p> Now the plumber must visit the house and fix some plumbing</p>
    <input type="button" id="fixPlumbing" value="Visit from plumber" />
</div>

<div class="step3 steps">
    <p> Now an electrician must fix the garage door</p>
    <input type="button" id="fixGarageDoor" value="Visit from electrician" />
</div>
    
<div class="step4 steps">
    <p> Lastly the weed problem must be solved </p>
    <input type="button" id="fixGarden" value="Visit from gardener" />  
</div>

<div class="step5 steps">
    <input type="button" id="startAgain" value="Start all over again!" />
</div>

CSS

body {
    font-family: verdana;
    font-size: 12px;
}

.houseStatusContainer {
    height: 300px;
    overflow: auto;
    display: block;
    border: 1px solid #eee;
    background-color: #f7f7f7;
}

li {
    border-radius: 5px;
    background-color: #800014;
    border: 3px solid white;
    color: white;
    box-shadow:5px 5px 3px #888888;
    padding: 10px;
    margin-left: 15px;
}

li.header {
    font-size: 20px;
    text-transform: uppercase;
    margin-left: 0px;
    margin-top: 10px;
}

ul {
    list-style-type: none;
    padding: 5px;
}
.step1 {
    background-color: #fff2f4;
    padding: 5px;
}

.step2, .step3, .step4, .step5 {
    display: none;
    background-color: #fff2f4;
    padding: 5px;
}

JavaScript

var houseWithProblems = {
    plumbing: "leaky faucet",
    garageDoor: "broken motor",
    backyard: "weed infestation",
    
    //accept function which will receive the visitor
    accept: function(visitor) {
        visitor.visit(this);
    }
}



var visitorHomeInspector = {
    visit: function(home) {
        
        $('#specs').append("<li class='header'>Current house status:</li>");
        
        //let's display this on our list
        $('#specs').append("<li> Plumbing: " + home.plumbing + "</li>");
        
        $('#specs').append("<li> Garage Door: " + home.garageDoor + "</li>");
        
        $('#specs').append("<li> Backyard: " + home.backyard + "</li>");
    }
}

var visitorPlumber = {
    visit: function(home) {
        //let's fix the plumbing
        home.plumbing = "All good!"
    }
}

var visitorElectrician = {
    visit: function(home) {
        //let's fix the garage door
        home.garageDoor = "All good!"
    }
}

var visitorGardener = {
    visit: function(home) {
        //let's fix the garage door
        home.backyard = "All good! No more weeds"
    }
}



//our event handlres for the buttons----------
$('.display').click(function() {
    houseWithProblems.accept(visitorHomeInspector);
    $('.step1').fadeOut('slow', function() {
        $('.step2').fadeIn('slow');
    });
   
    
    //scroll to bottom
    scrollLatestStatus();
});

$('#fixPlumbing').click(function() {
    //just so we can see the upgraded spec
    $('#specs').append("<li class='header'>Fixing Plumbing...</li>");
    
    //visit from plumber
    houseWithProblems.accept(visitorPlumber);
    houseWithProblems.accept(visitorHomeInspector);
    $('.step2').fadeOut('slow', function() {
        $('.step3').fadeIn('slow');
    });
    
    
    //scroll to bottom
    scrollLatestStatus();
});

$('#fixGarageDoor').click(function() {
    //just so we can see the upgraded spec
    $('#specs').append("<li class='header'>Fixing Garage Door...</li>");
    
    //now...