JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<div class="comment">
    This is a long comment text. 
    This is a long comment text. 
    This is a long comment text. 
    This is a long comment text. This is a long comment text.This is a long comment text. 
    This is a long comment text. 
    This is a long comment text. 
    This is a long comment text. This is a long comment text.This is a long comment text. 
    This is a long comment text. 
    This is a long comment text. 
    This is a long comment text. This is a long comment text.This is a long comment text. 
    This is a long comment text. 
    This is a long comment text. 
    This is a long comment text. This is a long comment text.This is a long comment text. 
    This is a long comment text. 
    This is a long comment text. 
    This is a long comment text. This is a long comment text.This is a long comment text. 
    This is a long comment text. 
    This is a long comment text. 
</div>
<div class="comment">
    Another long comment text. 
    Another long comment text. 
    Another long comment text. 
    Another long comment text. Another long comment text.Another long comment text. 
    Another long comment text. 
    Another long comment text. 
    Another long comment text. Another long comment text.Another long comment text. 
    Another long comment text. 
    Another long comment text. 
    Another long comment text. Another long comment text.Another long comment text. 
    Another long comment text. 
    Another long comment text. 
    Another long comment text. Another long comment text.Another long comment text. 
    Another long comment text. 
    Another long comment text. 
    Another long comment text. Another long comment text.Another long comment text. 
    Another long comment text. 
    Another long comment text. 
</div>


<script type="text/javascript">
    $(document).ready(function() {
     
       ...

JavaScript

jQuery.fn.shorten = function(settings) {
  var config = {
    showChars : 100,
    ellipsesText : "...",
    moreText : "more",
    lessText : "less"
  };

  if (settings) {
    $.extend(config, settings);
  }

  this.each(function() {
    var $this = $(this);

    var content = $this.html();
    if (content.length > config.showChars) {
      var c = content.substr(0, config.showChars);
      var h = content.substr(config.showChars , content.length - config.showChars);
      var html = c + '<span class="moreellipses">' + config.ellipsesText +
        '&nbsp;</span><span class="morecontent"><span>' +
        h + '</span>&nbsp;&nbsp;<a href="javascript:void(0)" class="morelink">' +
        config.moreText + '</a></span>';
      $this.html(html);
      $(".morecontent span").hide();
    }
  });

  $('.morelink').on('click', function() {
    var $this = $(this);
    if ($this.hasClass('less')) {
      $this.removeClass('less');
      $this.html(config.moreText);
    } else {
      $this.addClass('less');
      $this.html(config.lessText);
    }
    $this.parent().prev().toggle();
    $this.prev().toggle();
    return false;
  });
};