JSFiddle - React, Tailwind, and code Playground

HTML

<a data-text="0" class="schedule-popup" href="#popup-schedule-1">Crossfit</a><br>
<a data-text="1" class="schedule-popup" href="#popup-schedule-1">Aerobics</a><br>
<a data-text="2" class="schedule-popup" href="#popup-schedule-1">Relax</a><br>
<div class="crossfit-popup">
	<h3></h3>
	<div class="text-p"></div>
</div>

JavaScript

var scheduleText = [
	{
		name: 'Crossfit',
		message: 'Записаться на Crossfit в понедельник'
	},
	{
		name: 'Aerobics',
		message: 'Записаться на Aerobics в понедельник'
	},
	{
		name: 'Relax',
		message: 'Записаться на Relax в понедельник'
	}
];


 $(function() {
     $(".schedule-popup").click(
       function(e) {
	   e.preventDefault();
         var index = parseInt($(this).attr('data-text')),
			data;
		if(index >= scheduleText.length)
			return;
		data = scheduleText[index];
		$(".crossfit-popup h3").text(data.name);
		$(".crossfit-popup .text-p").text(data.message);
		 return !1;
       });
   });