JSFiddle - React, Tailwind, and code Playground

HTML

<div id="DaySchedule_5amDetail">
                <span>&nbsp;</span>
            </div>
            <div id="DaySchedule_6amDetail">
                <span>&nbsp;</span>
            </div>
            <div id="DaySchedule_7amDetail" class="start"> <-- start
                <span>&nbsp;</span>
            </div>
            <div id="DaySchedule_8amDetail">
                <span>&nbsp;</span>
            </div>
            <div id="DaySchedule_9amDetail">
                <span>&nbsp;</span>
            </div>
            <div id="DaySchedule_10amDetail" class="end"> <-- end
                <span>&nbsp;</span>
            </div>
            <div id="DaySchedule_11amDetail">
                <span>&nbsp;</span>
            </div>

CSS

.wrapper{ padding:5px; border: 1px solid green}

JavaScript

/* add ID's to span text for visual reference*/
$('span').text(function(){
   return this.parentNode.id 
})

$('.start').each(function(){
    var $nextGroup= $(this).nextUntil('.end')
     $nextGroup.add(this).add($nextGroup.next()).wrapAll('<div class="wrapper">');
})