JSFiddle - React, Tailwind, and code Playground

by codef0rmer

HTML

<ul>
  <li data-index="3">add 3</li>
  <li data-index="4">add 4</li>
  <li data-index="5">add 5</li>
  <li data-index="6">add 6</li>
</ul>

CSS

.on  { border :1px solid red; }

JavaScript

$(function () {
    var arr = {};
    $('ul > li').click(function () {
       $(this).toggleClass('on');
        if ($(this).hasClass('on')) {
           arr[$(this).attr('data-index')] = $(this).html();
        } else {
            delete arr[$(this).attr('data-index')];
        }
        console.log(sortObj(arr));
    });
    
    function sortObj(arr){
        var sortedKeys = new Array();
        var sortedObj = {};
    
        for (var i in arr){
            sortedKeys.push(i);
        }
        sortedKeys.sort();
    
        for (var i in sortedKeys){
            sortedObj[sortedKeys[i]] = arr[sortedKeys[i]];
        }
        return sortedObj;
    }
});