Interact with labels and change text

HTML

<section>
    <article>
        <h1>This is stuff</h1>
        <div class="list">
            <div class="label" id="item-1" data-state="0"></div>
            <div class="label" id="item-2" data-state="0"></div>
            <div class="label" id="item-3" data-state="0"></div>
            <span class="sml">and</span>
            <div class="label" id="item-4" data-state="0"></div>
        </div>
    </article>
<section>

CSS

h1 {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 500;
}
.list {
    width: 20%;
    display:flex;
    flex-direction:column;
    gap: 8px;
    padding: 8px 4px;
}
.label {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 800;
    letter-spacing: 1;
    padding: 8px 12px;
    border: solid 2px black;
    border-radius: 99px;
    text-align: center;    
    box-shadow: 0px 2px;
    transition: all 0.6s;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.label:hover {
    box-shadow: none;
}
.sml {
  padding: 8px 0;
}

JavaScript

var dictionary = {
    'item-1': {
        0: 'Dress me',
        1: 'Where your clothes at..?'
    }, 'item-2': {
        0: 'Press me',
        1: 'I\'m calling the cops'
    }, 'item-3': {
        0: 'Caress me',
        1: 'Stop it, mom..'
    }, 'item-4': {
        0: 'Impress me',
        1: 'I\'m going to live with dad.'
    }
};

var itemStates = {};
var key = null;
var state = 0;

function receiveVisions() { //Get the items id and data-state values and read from the array using them as keys
  document.querySelectorAll('.label[id^="item-"]').forEach(item => {
    key = item.id;
    state = Number(item.dataset.state);
    itemStates[key] = Number(state);      
    item.textContent = dictionary[key][state];
  });  
}

function resetVisions() { //Reset all items to the default state
  document.querySelectorAll('.label[id^="item-"]').forEach(item => {
    item.dataset.state = 0;
  });  
}

document.addEventListener('DOMContentLoaded', () => {
    receiveVisions(); //Load the stuff when the page loads
});

document.addEventListener('click', function (event) {
    const actor = event.target.closest('.label[id^="item-"]'); //Get the item clicked-on
    if(!actor) { return; }

    var actorState = Number(actor.dataset.state); //Store the state it had when clicked-on

    resetVisions(); //Reset all items to the default state

    actor.dataset.state = 1 - actorState; //Set the clicked-on item to its opposite state
    
    receiveVisions(); //Reload the items with their new states
});