JSFiddle - React, Tailwind, and code Playground

HTML

<div>
         <div class="eventer" rel="0"><strong>Event 1 Saturday</strong><br />
         yakedi yak</div>
         <p class="selctor" rel="0"><a href="#">Add to Schedule</a></p>
      </div>
      <br /><br />
      
   	<div>
         <div class="eventer" rel="1"><strong>Event 1 Saturday</strong><br />
         more yakedi yak</div>
         <p class="selctor" rel="1"><a href="#">Add to Schedule</a></p>
      </div>
      <br /><br />

   	<div>
         <div class="eventer" rel="2"><strong>Event 3 Sunday</strong>
         <p>new yakedi yak</p></div>
         <p class="selctor" rel="2"><a href="#">Add to Schedule</a></p>
      </div>
      <br /><br />

   	<div>
         <div class="eventer" rel="3"><strong>Event 4 Sunday</strong>
         <p>blah blah dooodah</p></div>
         <p class="selctor" rel="3"><a href="#">Add to Schedule</a></p>
      </div>
      <br />

      <input type="submit" id="buttn" value="Saved Events"><br /><br />

		<div>Selected Events are:<br />
      	<div id="result">
         </div>      
      </div>

CSS

.eventer { 
	background-color:#9CB2B7; 
	padding: 15px; width: 150px; 
	height: auto; margin:0; color: #fff; 
	letter-spacing:0.7px;
}
.selctor {
	background-color: #A0AABA;
	width: 180px;
	/* [disabled]padding: 2px 5px; */
}
a {
	display: block;
	text-decoration: none;
	color: #fff;
	letter-spacing: 0.7px;
	text-align: center;
	font-weight: normal;
	padding: 5px;
 }
#result{ height:200px; outline:dotted 2px red; padding-bottom:150px; }

JavaScript

$(document).ready(function(){

		$(".selctor").click(function () {
			var i=$(this).attr("rel");
			console.log(i);
			var eventsArray=document.getElementsByClassName("eventer");
			eventSelctd=(eventsArray[i]).outerHTML;
			console.log("selected event is" + " " + eventSelctd);
		
			if (typeof(Storage) != "undefined") {
				 localStorage.setItem("schedule "+ i, eventSelctd);
				 //console.log("local Storage should read " + eventSelctd);
			}
				else {
				 document.getElementById("#result").innerHTML = "Sorry, your browser does not support Web Storage...";
				}
			
	});
		$("#buttn").click(function () {
		//var allEventers;
		var storaged = localStorage.length;
		//for (var i=0; i<storaged; i++)
		//allEventers += String(storaged[i]);
		
		for( var i=0; i<storaged; i++ )
		{
    	console.log("Your stored events are " + localStorage[i]);
		
		$("#result").html(localStorage[i]);
		}
		});
	
});