JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

HTML

<ul id='stockList'>
    <li id='stockInfo'></li>
</ul>

JavaScript

var timeout;
    $('#stockList li').hover(
           function () {
              clearTimeout(timeout);// this will take care if user re-hover over the element
              $(this).css({ color: 'red' }); //mouseover
                  if ($(this).text() == symbol) {        
                     $('#stockInfo').append('<div><ol><li>' + "Company = " + company + '</li><br/><li>' + "Market = " + market + '</li><br/><li>' + "Sector = " + sector + '</li><br/><li>' + "Price = " + price + '</li><br/><li>' + "Year Range = " + low + " " + high + '</li><br/><li>' + "Dividend = " + amount + " " + yieldx + " " + frequency + '</li></ol><br/></div>');
                        }
                    },

                function () {
                    setTimeout(function(){
                    $('#stockList li').css({ color: 'navy' }); 
                    $('#stockInfo').empty();
                    },1000);
                }
            );