JSFiddle - React, Tailwind, and code Playground

HTML

<div id="activities" class="info_container">
			<h1>Our Activities</h1>
			<div class="contain">
				<ul> 
					<li>Activity 1</li>
					<li>Activity 2</li>
					<li>Activity 3 </li>
					<li>Activity 4 </li>
					<li>Activity 5</li>
					<li>Activity 6 </li>
					<li>Activity 7</li>
					<li>Your Suggestions</li>
				</ul>
				<p>
					Bacon ipsum dolor sit amet ribeye tenderloin meatball, chuck andouille beef ribs jerky
					 bresaola beef. Rump flank chicken meatloaf tail sirloin salami cow filet mignon ribeye 
					 jerky swine pork loin turkey. Kielbasa pastrami shankle hamburger cow capicola venison 
					 meatball turkey pancetta tongue doner porchetta. Ground round turducken flank jowl. 
					Sausage ham hock ham leberkas tri-tip. Brisket short loin cow leberkas kielbasa boudin
					 meatball. Ribeye t-bone sirloin doner.
				</p>
				<div id="suggestion_input">
					<label for="name" >Your Name</label>
					<input type="text" id="name" name="name">
					<label for="email">Email</label>
					<input type="email" id="email" name="email">
					<label for="suggestions">Suggestions</label>
					<textarea id="suggestions" name="suggestions" rows="39"></textarea>
				</div>
				 
			</div>
		</div>

CSS

#activities{
 background:#FFFF00;
 border-radius:7px;
 height:400px;
 }
 
  #activities ul{
  
  padding:0;
  width:200px;
  margin-left:10px;
  margin-top:-4px;
  display:inline-block;
  }
  
 #activities li{
 margin-top:5px;
 background:red;
 width:200px;
 text-align:center;
 cursor:pointer;
 color:white;
 padding:3px;
 }
 
 #activities li:hover{
 border :2px solid white;
 } 
 
 #activities p{
 display:inline-block;
 width:500px;
 vertical-align:top;
 margin-top:20px;
 margin-left:20px;
 background:#FFFDA1;
 }
 
 #suggestion_input{
 display:none;
 margin-left:150px;
 vertical-align:top;
 margin-top:20px;
 text-align:center;
 }
 
#suggestion_input input,textarea{
 display: block;
  
 margin: 15px auto 15px;
 }
 
 #suggestion_input textarea{
 max-width:300px;
 max-height:100px;
 
  
 
 }
 #suggestion_input label{
 background:red;
 color:white; 
 padding:7px;
 width:200px;
 display:inline-block;
 }

JavaScript

document.getElementById('activities').addEventListener("click",function(e){
 		 
 		var suggestion_input = document.getElementById('suggestion_input');
 		 
        // SKIP THIS CODE, THE ERROR LIES BELOW
 		if(e.target.tagName === 'LI'){
 			var light_green =      document.getElementById('activities').querySelector('#light_green'); 
 			 
 			if(light_green){
 				 light_green.style.backgroundColor="red";
 				 light_green.id = "";
 				 e.target.style.backgroundColor = '#0DFFB9';
				 e.target.id = 'light_green';
 			}else{
 				e.target.style.backgroundColor = '#0DFFB9';
				e.target.id = 'light_green';
 			}
 			
// THIS IS WHERE THE ERROR OCCURS 			 
 			if(e.target.innerText === 'Your Suggestions'){
 			
 				var para = document.getElementById('activities').querySelector('p');
 				var display = para.style.display;
                /* if you uncomment this, then the following code will work
                outside of the if display == 'inline-block' condition
                
                para.style.display = 'none';
                suggestion_input.style.display = 'inline-block';
                
                */
 				 
				if(display == 'inline-block'){
                    // This code will not work
					para.style.display = 'none';
                    suggestion_input.style.display = 'inline-block';
					console.log('works');
				}
 			}else{
 				if(display == 'none'){
					display = "inline-block";
				}
 			}
 		} 
 	});