JSFiddle - React, Tailwind, and code Playground

by Givet Atry

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="event_details"><h4 class="entry-title summary"><a href="https://mhv.psone.ca/event/pioneer-days/" rel="bookmark">Pioneer Days</a></h4><span class="duration time"><span class="tribe-event-date-start">August 4 @ 9:00 am</span> - <span class="tribe-event-date-end">August 7 @ 6:00 pm</span></span></div>

<div class="event_details"><h4 class="entry-title summary"><a href="https://mhv.psone.ca/event/2017-heritage-classic-golf-tournament/" rel="bookmark">2017 Heritage Classic Golf Tournament</a></h4><span class="duration time"><span class="tribe-event-date-start">August 16 @ 10:00 am</span> - <span class="tribe-event-time">8:00 pm</span></span></div>

JavaScript

$(".event_details").each(function(index) {
	$(this).html($('span').html().split('@')[0]);
	var data =$('#date').text();
	var arr = data.split('@');
	$(".event_details").html("<span>"+arr[0] + "</span>");	
//    var data =$('<span').text();
//    var arr = data.split('@');
//    $("span").html("<span>"+arr[0] + "</span>");	  
//  }
}