Javascript loop indexing issue

Question

Here's the HTML

<li class="carousel-btn-wrapper">
  <div class="progressButton">
    <p></p>
  </div>
  <button class="videoCaroselButton">Welcome</button>
</li>
<li class="carousel-btn-wrapper">
  <div class="progressButton">
    <p></p>
  </div>
  <button class="videoCaroselButton">Video Name</button>
</li>
<li class="carousel-btn-wrapper">
  <div class="progressButton">
    <p></p>
  </div>
  <button class="videoCaroselButton">Another Video Name</button>
</li>

I am trying to add a number in the p tag that is a child of the .progressButton. I need the number to increase with every p tag. I'm having issues with my javascript loop. I assume the issue is in the way .text(buttonNumber[]); is indexing. How do I solve this?

var videoSrcArray = ['url.com/adf', 'url.com/asf', 'url.com/sdf', 'url.com/asdf','url.com/asdfl']
var buttonNumber = "";
var i;
for (i = 1; i < videoSrcArray.length - 1; i++) {
  buttonNumber += i ;
  $('.progressButton').children('p').text(buttonNumber[1]);
}

Answer 1

You actually don't need buttonNumber at all. Delete it (lines 2 and 5) and then change:

$('.progressButton').children('p').text(buttonNumber[1]);

to:

$('.progressButton').children('p').eq(i-1).text(i);