JSFiddle - React, Tailwind, and code Playground

by AlpacaLord

HTML

<body>
  <div class="myoption" id="opt1" data-selected="no"><span class="num">1</span></div>
  <div class="myoption" id="opt2" data-selected="no"><span class="num">2</span></div>
  <div class="myoption" id="opt3" data-selected="no"><span class="num">3</span></div>

  <button class="mybtn">Do magic!</button>
</body>

CSS

body {
  margin: 100px;
}

.myoption {
  height: 50px;
  width: 50px;
  background-color: darkblue;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
}

.myoption[data-selected=yes] {
  border: 3px solid red;
}

.num {
  color: #fff;
}

JavaScript

$(document).on('click', '.myoption', function() {
  event.target.setAttribute('data-selected', event.target.getAttribute('data-selected') === 'yes' ? 'no' : 'yes');
  $('.myoption').not(event.target).attr('data-selected', 'no');
});


$(document).on('click', '.mybtn', function(e) {
  e.preventDefault();
  myData = [];
  $(".myoption").each(function() {

    var id = $(this).attr('id');
    var selec = $(this).data('selected');

    item = {}
    item[id] = selec;

    myData.push(item);
  });
  alert(JSON.stringify(myData));
});