JSFiddle - React, Tailwind, and code Playground

HTML

<button>Click</button>
<li data-number="1" class="active">First</li>
<li data-number="2">Second</li>
<li data-number="3">Third</li>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

CSS

.active {
    background-color:blue;
}

JavaScript

/*$("li").click(function () {
    $(this).addClass("active").siblings("li").removeClass("active")
});

$("button").click(function () {
    var functions = [f1, f2, f3];
    var f1 = function f1() {console.log("f1")};
	var f2 = function f2() {console.log("f2")};
	var f3 = function f3() {console.log("f3")};
    var x = $("ul").find("li.active").data("number");
    var y=functions.length;
    console.log(y);

    if (x == y) {
        $(f1);
    } else {
        $("f" + (x + 1)); //also it doesn't work $(f+(x+1))
    }
});*/

$(function() {
  var fns = [
    function f1() {
      console.log("f1");
    },
    function f2() {
      console.log("f2");
    },
    function f3() {
      console.log("f3");
    }
  ];
  
  var fn;
  $("li").click(function() {
     fn = fns[$(this).data().number];
    $(this).addClass("active").siblings("li").removeClass("active");    
  });
    $("button").click(function(e, _init){
      fn ? fn() : fns[_init || 0]();
    }).trigger("click", [1]);
});