JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<div id="people">
    <ul>
        <li class="start">Jim</li>
        <li>Tim</li>
        <li>Tom</li>
        <li>Peter</li>
    </ul> <span></span>

</div>
<div>
    <button id="next">Go to next</button>
    <button id="prev">Go to Prev</button>
    <br />
    <input type="text" name="textfield" id="names" placeholder="Enter name here" />
    <br />
    <button id="add">Add name</button>
    <br />
    <br />
    <button id="remove">remove name</button>
    <br />
</div>

JavaScript

var n = $("#people li").length
       $("span").text("There are " + n + " workers for over time");

      $('#add').click(function () {
          var listvalue = $('#names').val();
          $("#names").val("");
          $('ul').append('<li>' + listvalue + '</li>');
          $('#people').find('li').filter(':even').css('border', '1px solid blue').end().end().end().css('border', '1px solid #00f;');
          $('#people').find('li').filter(':odd').css('border', '1px solid red').end().end().end().css('border', '1px solid #00f');
          var n = $("#people li").length
          $("span").text("There are " + n + " workers for over time");

          $('#names').val("");
      });

      $('#people').find('li').filter(':even').css('border', '1px solid blue').end().end().end().css('border', '1px solid #00f;');
      $('#people').find('li').filter(':odd').css('border', '1px solid red').end().end().end().css('border', '1px solid #00f');


      var $curr = $(".start");
      $curr.css("background", "#ccc");
      $("button#next").click(function () {
          $curr = $curr.next();
          $("li").css("background", "");
          $curr.css("background", "#ccc");
      });

      var $curr = $(".start");
      $curr.css("background", "#ccc");
      $("button#prev").click(function () {
          $curr = $curr.prev();
          $("li").css("background", "");
          $curr.css("background", "#ccc");
      });

      $("button#remove").click(function () {
          $('#people li:last').remove();
      });