Video Playlist Thumbnails not Working

Question

My Complete website can be seen here.

I'm trying to make a playlist that plays videos. The video and thumbnail information all fill out correctly and after adding two entries all looks fine. However, I can no longer click on the appropriate thumbnail and select the video I want. The latest entry (e.g. Part 2) shows as the selected and I cannot select Part 1. Is something wrong with my tagging? The specific part I'm talking about below is the section tagged data-thumb="{sermon_thumbnail}".

Here is my code:

{exp:channel:entries channel="sermon_details" status="open" dynamic="no"} 
    <!-- VIDEO 1  -->
    <li data-index="rs-105" 
        data-transition="fade"
        data-slotamount="default"  
        data-easein="default" 
        data-easeout="default" 
        data-masterspeed="default"  
        data-thumb="{sermon_thumbnail}"  
        data-rotate="0"  
        data-saveperformance="off"  
        data-title="Part {sermon_part}<br/>{speaker_name}" 
        data-param1="{entry_date format="%F %d, %Y"}" 
        data-description="">
        <!-- MAIN IMAGE -->
        <img src="{site_url}images/video-back.png"  alt=""  data-lazyload="{site_url}images/video-back.png" data-bgposition="center center" data-bgfit="contain" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
        <!-- LAYERS -->

        <!-- LAYER NR. 1 -->
        <div class="tp-caption   tp-resizeme fullscreenvideo tp-videolayer"
            id="slide-105-layer-3"
            data-x="0"
            data-y="0"
            data-width="['auto']"
            data-height="['auto']"
            data-transform_idle="o:1;"

            data-transform_in="s:1000;e:Power1.easeInOut;"
            data-transform_out="s:1000;s:1000;"
            data-start="1150"
            data-responsive_offset="on"

            data-vimeoid="{vimeo_id}" 
            data-videoattributes="title=0&byline=0&portrait=0&api=1" 
            data-videowidth="100%" 
            data-videoheight="100%" 
            data-videoloop="none" 
            data-forceCover="1"
            data-aspectratio="16:9"
            data-autoplay="off"
            data-nextslideatend="true"
            data-volume="100"
            data-forcerewind="on"
            style="z-index: 5;"
        >
        </div>
    </li>
{/exp:channel:entries} 

Answer 1

Figured out the problem. It was a <li> tag data-index attribute I was not familiar with. Never seen that before, hence, didn't know I needed to change it to accommodate the aggregation of HTML text as the user adds more sermons. This is what I had for that attribute within the <li> div:

I changed the <li data-index="rs-105" to <li data-index="rs-{sermon_part}"

For clarity, later in this same file, I have a custom field named {sermon_part} used numbering what part the sermon is (Part 1, 2, 3, etc). I simply placed that field {sermon_part} after the rs- and it worked like a charm. I knew this answer was probably stupid simple. Still learning just how simple EE dev is I guess. :)