JSFiddle - React, Tailwind, and code Playground

by Neels Grobler

HTML

<div id="grp1">
    <div class="option" id="opt1">opt1</div>
    <div class="option" id="opt2">opt2</div>
    <div class="option" id="opt3">opt3</div>
    <div class="btn"><button id="btn1">Next</button></div>
</div>
<div id="grp2">
    <div class="option" id="opt4">opt4</div>
    <div class="option" id="opt5">opt5</div>
    <div class="option" id="opt6">opt6</div>
    <div class="btn"><button id="btn2">Back</button></div>
    <div class="btn"><button id="btn3">Done</button></div>
</div>
<div id="grp3">
    <div id="done"></div>
    <div class="btn"><button id="btn4">Back</button></div>
</div>

CSS

#grp2 {
    display: none;
}
#grp3 {
    display: none;
}
.option {
    float: left;
    border: 1px solid black;
    border-radius: 5px;
    width: 50px;
    height: 50px;
    background-color: #ff0;
}
.checked-option {
    background-color: #f80;
}
.btn {
    clear: both;
}

JavaScript

var selections = {
    "opt1": false,
    "opt2": false,
    "opt3": false,
    "opt4": false,
    "opt5": false,
    "opt6": false
};

$(document).ready(function() {
    $('.option').click(function(event) {
        var id = event.target.id;
        if (selections[id]) {
            $('#' + id).removeClass('checked-option');
            selections[id] = false;
        } else {
            $('#' + id).addClass('checked-option');
            selections[id] = true;
        }
    });
    $('#btn1').click(function() {
        $('#grp1').hide();
        $('#grp2').show();
    });
    $('#btn2').click(function() {
        $('#grp2').hide();
        $('#grp1').show();
    });
    $('#btn3').click(function() {
        var content = 'Selected:<ul>';
        for (var i in selections) {
            if (selections[i]) {
                content += '<li>' + i + '</li>';
            }
        }
        content += '</ul>';
        $('#grp2').hide();
        $('#done').html(content);
        $('#grp3').show();
    });
    $('#btn4').click(function() {
        $('#grp3').hide();
        $('#grp2').show();
    });
});