JSFiddle - React, Tailwind, and code Playground

HTML

<div class="vs" id="TITUS">
      TITUS
    </div>

    <div class="vs" id="Titus 1">
      Chapter 1
    </div>

    <div class="vs" id="Titus 1:1">
      &nbsp;1 Paul, a servant of God, and an apostle of Jesus Christ, according to the faith of God's elect, and <a href="TitusRef.html#Titus%201">a</a>the acknowledging of the truth <a href="TitusRef.html#Titus%202">b</a>which is after godliness;
    </div>

    <div class="vs" id="Titus 1:2">
      &nbsp;2 <a href="TitusRef.html#Titus%203">c</a>In hope of eternal life, which God, <a href="TitusRef.html#Titus%204">d</a>that cannot lie, promised <a href="TitusRef.html#Titus%205">e</a>before the world began;
    </div>

    <div class="vs" id="Titus 1:3">
      &nbsp;3 <a href="TitusRef.html#Titus%206">f</a>But hath in due times manifested his word through preaching, <a href="TitusRef.html#Titus%207">g</a>which is committed unto me <a href="TitusRef.html#Titus%208">h</a>according to the commandment of God our Saviour;
    </div>

    <div class="vs" id="Titus 1:4">
      &nbsp;4 To <a href="TitusRef.html#Titus%209">i</a>Titus, <a href="TitusRef.html#Titus%2010">j</a>mine own son after <a href="TitusRef.html#Titus%2011">k</a>the common faith: <a href="TitusRef.html#Titus%2012">l</a>Grace, mercy, and peace, from God the Father and the Lord Jesus Christ our Saviour.
    </div>

    <div class="vs" id="Titus 1:5">
      &nbsp;5 For this cause left I thee in Crete, that thou shouldest <a href="TitusRef.html#Titus%2013">m</a>set in order the things that are wanting, and <a href="TitusRef.html#Titus%2014">n</a>ordain elders in every city, as I had appointed thee:
    </div>

    <div class="vs" id="Titus 1:6">
      &nbsp;6 <a href="TitusRef.html#Titus%2015">o</a>If any be blameless, <a href="TitusRef.html#Titus%2016">p</a>the husband of one wife, <a href="TitusRef.html#Titus%2017">q</a>having faithful children not accused of riot or unruly.
    </div>

    <div class="vs" id="Titus 1:7">
      &nbsp;7 For a bishop must be...

CSS

.vs{font-family:"Trebuchet MS"; font-size:20px; color:#000000;}
  a{font-family:"Trebuchet MS"; font-size:15px; text-decoration:none;font-weight:bold; color:#FF0000;}
  div{ line-height:22px; margin-bottom:12px}

JavaScript

$(window).scroll(function() {
			
			var winTop = $(this).scrollTop();
			var divs = $('div');
			
			var top = $.grep(divs, function(item) {
				return $(item).position().top <= winTop;
			});
			
			
			//var id=$(top).first().attr('id');
			var ll=$(top);
			
			
			
		$(top).each(function(i, item) {
		var total=ll.length-1;
		 
		if(total==i)
		{
		$("#finalvalue1").empty();
     document.title=$(item).attr("id");
	}
});
			
			
			
		});
		function createListener1(){
	document.addEventListener('click', function(event){
		var element=event.target;
		if(element!==document.body){
			if(element.className==='vs'){
				element.className='highlight1';
			} else if(element.className==='highlight1') {
				element.className='vs';
			}
		}
	}, false);
}
function createListener2(){
	document.addEventListener('click', function(event){
		var element=event.target;
		if(element!==document.body){
			if(element.className==='vs'){
				element.className='highlight2';
			} else if(element.className==='highlight2') {
				element.className='vs';
			}
		}
	}, false);
}
	function createListener3(){
	document.addEventListener('click', function(event){
		var element=event.target;
		if(element!==document.body){
			if(element.className==='vs'){
				element.className='highlight3';
			} else if(element.className==='highlight3') {
				element.className='vs';
			}
		}
	}, false);
}