ReadMoreJS with Bootstrap Carousel not working

I have been trying to get this working for over 6 hours straight and couldn't get a working solution. The Read-More doesn't work in the 2nd slide or thereafter. What am I doing wrong?

I have a feeling the Readmore.JS isn't reading the other slides! What should I do? I'm at my wits end.

DEMO JSFIDDLE

HTML:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
      <div class="item active text-center">
<article>
We have contracts with all the major airlines promising you the slot at any time along with best level of unbeatable customer support! We have contracts with all the major airlines promising you the slot at any time along with best level of unbeatable customer support!We have contracts with all the major airlines promising you the slot at any time along with best level of unbeatable customer support!We have contracts with all the major airlines promising you the slot at any time along with best level of unbeatable customer support!We have contracts with all the major airlines promising you the slot at any time along with best level of unbeatable customer support!We have contracts with all the major airlines promising you the slot at any time along with best level of unbeatable customer support! :)
<br />
Major airlines promising you the slot at any time along with best level of unbeatable customer support!We have contracts with all the major airlines promising you the slot at any time along with best level of unbeatable customer support!We have contracts with all the major airlines promising you the slot at any time along with best level of unbeatable customer support!
</article>
      </div>

      <div class="item text-center">
<article>
We have contracts with all the major airlines promising you the slot at any time along with best level of unbeatable customer support! We have contracts with all the major airlines promising you the slot at any time along with best level of unbeatable customer support!We have contracts with all the major airlines promising you the slot at any time along with best level of unbeatable customer support!We have contracts with all the major airlines promising you the slot at any time along with best level of unbeatable customer support!We have contracts with all the major airlines promising you the slot at any time along with best level of unbeatable customer support!We have contracts with all the major airlines promising you the slot at any time along with best level of unbeatable customer support! :( 
<br />
None of the major airlines promising you the slot at any time along with best level of unbeatable customer support!We have contracts with all the major airlines promising you the slot at any time along with best level of unbeatable customer support!We have contracts with all the major airlines promising you the slot at any time along with best level of unbeatable customer support!
</article>
      </div>

    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

CSS (my client wants a height with scroller when read-more is clicked):

.item {
  height: 250px;
  overflow-x: scroll;
}

JS:

$('#info').readmore({
  moreLink: '<a href="#">Usage, examples, and options</a>',
  collapsedHeight: 384,
  afterToggle: function(trigger, element, expanded) {
    if(! expanded) { // The "Close" link was clicked
      $('html, body').animate({scrollTop: element.offset().top}, {duration: 100});
    }
  }
});

$('article').readmore({speed: 500});