JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div class="go item" id="container">

    </div>
</div>

CSS

.item {
    display:block;
    overflow:hidden;
    padding-bottom: 10px;
}

JavaScript

Parse.initialize("79tphN5KrDXdjJnAmehgBHgOjgE2dLGTvEPR9pEJ", "9lblofQNZlypAtveU4i4IzEpaOqtBgMcmuU1AE6Y");


///////////////Parse code to log user in and pull back comments/////////////////////

Parse.User.logIn("dave", "delvedia", {
  success: function(user) {
    console.log("Logged in!");
  }
});

var MyBadge = Parse.Object.extend("myBadges");
var myBadgeQuery = new Parse.Query("myBadges");
myBadgeQuery.include('uploadedBy');
myBadgeQuery.find({
  success: function (Badgeresults) {
    var Badges = [];
    for (var i = 0; i < Badgeresults.length; i++) {
      Badges.push({
        comment: Badgeresults[i].get('Comment'),


      });

    }

    _.each(Badges, function (item) {
      var wrapper = $('<div></div>');

      wrapper.append('<div id="comments"  class="item"></div>' + ' Reason: ' + item.comment + '</div>' + '<br>');

      $('#container').append(wrapper);

    });                            

  },
  error: function (error) {
    alert("Error: " + error.code + " " + error.message);
  }
});



   ////////////////////////Ends///////////////////////

   //////////////////Hide/show comments on code//////////////

   var collapsedSize = '20px';
   $('.item').each(function() {
    var h = this.scrollHeight;
    console.log(h);
    var div = $(this);
    if (h > 30) {
      div.css('height', collapsedSize);
      div.after('<a id="more" class="item" href="#">Read more</a><br/>');
      var link = div.next();
      link.click(function(e) {
        e.stopPropagation();

        if (link.text() != 'Collapse') {
          link.text('Collapse');
          div.animate({
            'height': h
          });

        } else {
          div.animate({
            'height': collapsedSize
          });
          link.text('Read more');
        }

      });
    }

  });