How to use "Read More" button in laravel with javascript

Hello everyone How to use Read More button With laravel and Javascript.

Laravel Code:

 <p>
            {!! str_limit(($activity->subject->discussion), 300, '') !!}
            @if (strlen($activity->subject->discussion) > 300)
                <span id="dots">...</span>
                <span id="more" style="display:  none;"></span>
                
            @endif

            
            
            </p>
            <button class="btn btn-primary btn-small" onclick="myFunction()" id="myBtn">Read more</button>

Here i think if condition also count the html tags

Javascript Code:

    <script type="text/javascript">
function myFunction() {
    var dots = document.getElementById("dots");
    var moreText = document.getElementById("more");
    var btnText = document.getElementById("myBtn");

    if (dots.style.display === "none") {
        dots.style.display = "inline";
        btnText.innerHTML = "Read more";
        moreText.style.display = "none";
    } else {
        dots.style.display = "none";
        btnText.innerHTML = "Read less";
        moreText.style.display = "inline";
    }
}
</script>

using these read more button is work But when we click on any read more button every time open the first paragraph and also in if condition display "read more" button which data length is less than 300.

via Chebli Mohamed