jQuery fadeIn then fadeOut text from innerHTML not working - html

Question

I have a jQuery function to fade text in and out one by one. However the function is not working correctly due to I place the text from jQuery. When I try to run it, it is only showing 0. 1 to 4 is not shown.
var html = '<div id="main">';
for (var i = 0; i < 5; i++) {
html += '<div class="trip">' + i + '<div>';
}
html += '</div>';
document.getElementById('todayPrayTime').innerHTML = html;
var $elem = $('#main .trip'),
l = $elem.length,
i = 0;
function go() {
$elem.eq(i % l).fadeIn(700, function() {
$elem.eq(i % l).fadeOut(700, go);
i++;
})
}
go()
.trip {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="todayPrayTime"></div>
Fiddle.

Answer 1

var html = '<div id="main">';
for (var i = 0; i < 5; i++) {
html += '<div class="trip">' + i + '</div>';
}
html += '</div>';
document.getElementById('todayPrayTime').innerHTML = html;
function go($list, i) {
var l = $list.length, $trip = $list.eq(i % l);
$trip.show().fadeIn(700, function(){
$trip.fadeOut(700, function(){
$trip.hide();
if ( ++i < l ) go($list, i);
});
})
}
go($('#main .trip'), 0)
.trip {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="todayPrayTime"></div>
var html = '<div id="main">';
for (var i = 0; i < 5; i++) {
html += '<div class="trip">' + i + '</div>';
}
html += '</div>';
document.getElementById('todayPrayTime').innerHTML = html;
function go($list, i) {
var l = $list.length, $trip = $list.eq(i);
$trip.show().fadeIn(700, function(){
$trip.fadeOut(700, function(){
$trip.hide();
go($list, (++i) % l);
});
})
}
go($('#main .trip'), 0)
.trip {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="todayPrayTime"></div>