JSFiddle - React, Tailwind, and code Playground

by Luke Nickerson

HTML

<div class="selection"></div>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

CSS

.selection {
    float: right;
    padding: 1em;
    background: yellow;
    font-size: 140%;
}
.selection:before {
    content: "selection: ";
}
.a, .b, .c {
    display: block;
    cursor: pointer;
    width: 6em;
    height: 3em;
    margin: 1em 0;
    font-size: 200%;
    background: #066;
    text-align: center;
    line-height: 3em;
    color: white;
}

JavaScript

var $selection = $('.selection');
var sectorArray = ["a", "b", "c"];
// Loop over sector letters
for (var s in sectorArray) {
    var sector = sectorArray[s];
    console.log("Adding click event for sector: " + sector);
    $('div.' + sector).on("click", function(e){
        $selection.html(sector);
        console.log("Clicked sector: " + sector);
    });
}