JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <p>Some lorem ipsum text</p>
  <p>
    Some lorem ipsum text
    <span class="readmore">ClickReadmore</span>
  </p>
  <p>Some lorem ipsum text</p>
  <p>Some lorem ipsum text</p>
  <p>Some lorem ipsum text<span class="readless">read less</span>
</p>
</div>
<div>
  <p>Some lorem ipsum text</p>
  <p>
    Some lorem ipsum text
    <span class="readmore">ClickReadmore</span>
  </p>
  <p>Some lorem ipsum text</p>
  <p>Some lorem ipsum text</p>
  <p>Some lorem ipsum text<span class="readless">read less</span>
</p>
</div>
<div>
  <p>Some lorem ipsum text</p>
  <p>
    Some lorem ipsum text
    <span class="readmore">ClickReadmore</span>
  </p>
  <p>Some lorem ipsum text</p>
  <p>Some lorem ipsum text</p>
  <p>Some lorem ipsum text<span class="readless">read less</span>
</p>
</div>

CSS

.hideReadmore{background:blue;}
.showReadmore{background:green;}

JavaScript

// hide all p tags after readmore span on page load
$(function(){
$('div').find('.readmore').closest('p').nextAll('p').addClass('hideReadmore');
});

// show readmore on click
$('.readmore').click(function() {
    $(this).closest('p').nextAll('p').removeClass('hideReadmore');
    $(this).closest('p').nextAll('p').addClass('showReadmore');
});

// hide readmore on click
$('.readless').click(function() {
    $(this).closest('p').siblings(".showReadmore").andSelf().addClass('hideReadmore');
    $(this).closest('p').siblings(".showReadmore").andSelf().removeClass('showReadmore');
});