JSFiddle - React, Tailwind, and code Playground

HTML

<p><strong>text one</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos quod dolor autem provident obcaecati voluptatibus natus est consequatur sed dolores deserunt eligendi facere tenetur accusamus ea consequuntur repellat nam dolorem. <a href="" class="read_more">read more</a></p>

<p><strong>text two</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus ullam reiciendis rem doloribus sunt porro pariatur quis mollitia laudantium cupiditate provident iure dolores aspernatur ratione culpa cumque minima dicta perferendis.</p>

<p><strong>text three</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus ullam reiciendis rem doloribus sunt porro pariatur quis mollitia laudantium cupiditate provident iure dolores aspernatur ratione culpa cumque minima dicta perferendis.</p>

JavaScript

$('p').find('a.read_more').parent().nextAll().hide();

$('p').on('click', 'a.read_more', function(){
    $(this).parent().addClass('first');
    $(this).parent().nextAll('p').last().append('<a href="#" class="read_less">read less</a>');
    $(this).parent().nextAll().show();
    $(this).hide();
    return false;
});

$('p').on('click', 'a.read_less', function(){
    $(this).parent().prevUntil('p.first').andSelf().hide();
    $('a.read_more').show();
    $(this).remove();
    return false;
});