JSFiddle - React, Tailwind, and code Playground

by Konyrbayevv Kanaat

HTML

<div id="glossary">
<li><h2>ADI</h2>
ADI stand for Average Directional Index. This is used as a technical bareometer of the strength or weakness of trends in financial markets.</li>
<li><h2>Anonymous Trading</h2>
Traders can opt not to disclose their identity while making offers or bids on the financial markets.</li>
<li><h2>Appreciation</h2>
The increase in monetary value of any financial instrument in response to the market.</li>
<li><h2>Arbitrage</h2>
The simultaneous purchase and sale of an asset in order to increase profits with minimal risks.</li>
<li><h2>Ask Rate</h2>
The lowest price a seller is willing to sell a financial asset, also known as an offer.</li>
<li><h2>Asset</h2>
The instrument that a contract is based upon. This could be a stock, bond, or commodity.</li>
<li><h2>Asset Location</h2>
An investment strategy that aims to balance risk and reward by distribute a portfolio's assest according to a trader's goals and risk tolerance.</li>
<li><h2>At the Money</h2>
This term refers to a trade breaking even, meaing their neither a profit or a loss.</li>
<li><h2>Attorney in Charge</h2>
An individual authorized to make transactions on the financial markets on behalf of the trader.</li>
<li><h2>Authorized Dealer</h2>
A certified entity that engages in foreign currency transactions.</li>
<li><h2>Away from the Market</h2>
An expression used when a buy or sell price deviates from the assets market price.</li>
<li><h2>Altcoin</h2>
This term refers to low market cap cryptocurrencies. It originated as a term  to describe all cryptocurrencies "alternative coins" other than bitcoin. </li>
<li><h2>Aussie</h2>
A slang term for the AUD/USD currency pair.</li>
<li><h2>Balance of Payments (BOP)</h2>
A record that tracks a country's transactions over a particular period of time.</li>
<li><h2>Balance of Trade</h2>
The difference in value between a country's imports and exports over a particular period of time.</li>
<li><h2>Bank Rate</h2>
The interest rate that the...

JavaScript

/*
* jQuery listnav plugin
*
* Add a slick "letter-based" navigation bar to all of your lists.
* Click a letter to quickly filter the list to items that match that letter.
*
* Dual licensed under the MIT and GPL licenses:
*   http://www.opensource.org/licenses/mit-license.php
*   http://www.gnu.org/licenses/gpl.html
*
* Version 3.0.0 (11/22/2017)
* Author: Eric Steinborn
* Compatibility: jQuery 2.0+
*
*/
(function ($) {
  $.fn.listnav = function (options) {
    var opts = $.extend({}, $.fn.listnav.defaults, options),
        letters = ['_', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '-'],
        firstClick = false,
        clickEventType = '';

    //detect if you are on a touch device easily.
    if (document.ontouchstart !== null) {
      clickEventType = 'click';
    } else {
      // We added 'click' to this becuase on touchscreen computers, when you click with a mouse, it will not fire the click function on a letter, hence disabling the entire plugin functionality. Thanks to my homeboy @clechner77 for pointing this out to me:
      // https://github.com/esteinborn/jquery-listnav/issues/34
      clickEventType = 'touchend click';
    }

    opts.prefixes = $.map(opts.prefixes, function (n) {
      return n.toLowerCase();
    });

    return this.each(function () {
      var $wrapper, $letters, $letterCount, left, width, count,
          id = this.id,
          $list = $(this),
          counts = {},
          allCount = 0, fullCount = 0,
          isAll = true,
          prevLetter = '';

      if ( !$('#' + id + '-nav').length ) {
        $('<div id="' + id + '-nav" class="listNav"/>').insertBefore($list);
        // Insert the nav if its not been inserted already (preferred method)
        // Legacy method was to add the nav yourself in HTML, I didn't like that requirement
      }

      $wrapper = $('#' + id + '-nav');
      // <ul id="myList"> for list and <div...