jQuery .each() is ignoring elements

I’m making a commission website for fun.
I have made a jQuery function which parses for divs with #portfolio ids and then creates a custom bootstrap carousel to populate them.

The issue is the .each function is ignoring my second #portfolio div

My website is actually running right now and you can check out the issue here: https://pinkflamess.com/

here’s the html snippet:

<h3>Pixel Sprite</h3>
    <div id = "portfolio" count = 8 gifs="https://i.imgur.com/S5jceRT.gif,https://i.imgur.com/hsz8u5H.gif,
    https://i.imgur.com/Tv3MJJo.gif,https://i.imgur.com/6jNkVn4.gif,https://i.imgur.com/ifahlQx.gif,
    https://i.imgur.com/I5JrulB.gif,https://i.imgur.com/Q3DAk0f.gif,https://i.imgur.com/aPAa3Hf.gif">
    </div>
    <p><em>An animation in a pixelated style. 80 by 80 pixels, 4 frames, any fps </em><br/>
      Price: $10 to $15
    </p>
  <h3>Simple Chibi</h3>
    <div id = "portfolio" count = 8 gifs="https://i.imgur.com/OeE0lK4.gif,https://i.imgur.com/6VVvchn.gif,
    https://i.imgur.com/tr8lxoL.gif,https://i.imgur.com/SMH69wR.gif,https://i.imgur.com/mSkbr6J.gif,
    https://imgur.com/MILhBUn.gif,https://imgur.com/oLUxK6N.gif,https://imgur.com/dreYSnx.gif">
    </div>

here’s the jQuery snippet:

$(document).ready(function(){
  //BOOTSTRAP CAROUSELS
  $('#portfolio').each(function() {
    var gifs = $(this).attr('gifs').split(",");
    var count = $(this).attr('count');
    console.log($(this).attr("gifs")); 
    var strToAppend = '<div id="portfolioControls" class="carousel slide data-interval="10000" data-ride="carousel"><div class="carousel-inner">';
    //Mobile carousel (one image per slide))
    if($(window).width() < 480){
      strToAppend = strToAppend + '<div class="carousel-item active"><img class="d-block w-100" src="' + gifs[0] + '"></div>';
      for(var i = 1; i < count; i++){
          strToAppend = strToAppend + '<div class="carousel-item"><img class="d-block w-100" src="' + gifs[i] + '"></div>';
        }
    }
    //Tablet carousel (two images per slide))
    else if($(window).width() < 768){
      strToAppend = strToAppend + '<div class="carousel-item active"><img class="d-block w-50" src="' + gifs[0] + '"><img class="d-block w-50" src="' + gifs[1] + '"></div>';
      for(var i = 2; i < count; i = i + 2){ //must be divisble by 2
        strToAppend = strToAppend + '<div class="carousel-item"><img class="d-block w-50" src="' + gifs[i] + '"><img class="d-block w-50" src="' + gifs[i+1] + '"></div>';
      }
    }
    //Desktop carousel (three images per slide))
    else{
      strToAppend = strToAppend + '<div class="carousel-item active"><img class="d-block w-25" src="' + gifs[0] + '"><img class="d-block w-25" src="' + gifs[1] + '"><img class="d-block w-25" src="' + gifs[2] + '"><img class="d-block w-25" src="' + gifs[3] + '"></div>';
      for(var i = 4; i < count; i = i + 4){ //must be divisble by 4
        strToAppend = strToAppend + '<div class="carousel-item"><img class="d-block w-25" src="' + gifs[i] + '"><img class="d-block w-25" src="' + gifs[i+1] + '"><img class="d-block w-25" src="' + gifs[i+2] + '"><img class="d-block w-25" src="' + gifs[i+3] + '"></div>';
      }
    }
    strToAppend = strToAppend + '</div><a class="carousel-control-prev" href="#portfolioControls" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span>' +
      '<span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#portfolioControls" role="button" data-slide="next">' +
      '<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>'
    //Adds arrows to every carousel type
    $(this).append(strToAppend);
  });
  });

The console.log only prints out the gifs=”” of the first div, and not the second. (it also only prints once)

Thanks for reading, hope you have a good day/night!