JSFiddle - React, Tailwind, and code Playground

HTML

<ul  id="locationList">
        <li><a>Element 1</a></li>
        <li><a>Element 2</a></li>
        <li><a>Element 3</a></li>
        <li><a>Element 4</a></li>
        <li><a>Element 5</a></li>
        <li><a>Element 6</a></li>  
        <li><a>Element 6</a></li> 
        <li><a>Element 6</a></li> 
          <li><a>Element 6</a></li> 
          <li><a>Element 6</a></li> 
          <li><a>Element 6</a></li> 
          <li><a>Element 6</a></li> 
          <li><a>Element 6</a></li> 
          <li><a>Element 6</a></li> 
          <li><a>Element 6</a></li> 
          
                             

        
    </ul>
    
    <input name="" type="button" id="a" value="add one" > 
    
    <input name="" type="button" id="b" value="remove one">

CSS

#locationList {
    width:200px;
    height: 150px;
}

JavaScript

function checkLen(len){
		$('#locationList').css('overflow',function(){
			if(len>7){return 'scroll'
				}else{return 'auto'}
			});
	  }