Отображение кнопки «Доступен новый пост», когда в базе данных есть новые строки php

Question

В настоящее время я использовал функцию Jquery ready для загрузки данных из базы данных вместо обновления страницы. Проблема, с которой я сталкиваюсь, заключается в том, что я использовал ограничение слова, чтобы показать опцию «читать больше», чтобы показать оставшееся сообщение. Так как я использовал функцию интервала, он продолжает загружать контент снова и снова. Есть ли какая-либо идея или решение поможет мне?

Заранее спасибо.

Скрипт для загрузки данных

<script>
 $(document).ready(function(){
  $('#box').show();
  setInterval(function(){
   $('#show').load('get_post.php');
   $('#box').hide();
  }, 3000)
 })
</script>

get_post. php Файл

<?php



require_once('../dbconn.php');


$sql = "
SELECT post_id
     , post_title
     , post_cat
     , post_sub_cat
     , post_skill
     , post_company
     , post_location
     , post_type
     , post_price
     , post_message
     , user_pic
     , user_name
     , post_user_id
     , post_time
  FROM user_post
 ORDER 
    BY post_id DESC 
 LIMIT 1
";

$stmt = mysqli_prepare($conn, $sql);
//mysqli_stmt_bind_param($stmt3,"ss", $uid, $u_id);

$result = mysqli_stmt_execute($stmt);
mysqli_stmt_store_result($stmt);
mysqli_stmt_bind_result($stmt, $p_id, $p_title, $p_cat, $p_sub_cat, $p_skill, $p_company, $p_location ,$p_type, $p_price, $p_message, $p_user_pic, $p_user_name, $p_user_id, $p_post_time);

while ($row = mysqli_stmt_fetch($stmt)) 
{




    date_default_timezone_set("Asia/Colombo");

    $time_ago = strtotime($p_post_time);

    include_once('time_ago.php');




?>



<div class="post-bar">
    <div class="post_topbar">
        <div class="usy-dt">
            <img src="http://via.placeholder.com/50x50" alt="">
            <div class="usy-name">
                <h3><?php echo $p_user_name;?></h3>
                <span><img src="images/clock.png" alt=""><?php echo timeAgo($time_ago);?></span>
            </div>
        </div>
        <div class="ed-opts">
            <a href="#" title="" class="ed-opts-open"><i class="la la-ellipsis-v"></i></a>
            <ul class="ed-options">
                <li><a href="#" title="">Edit Post</a></li>
                <li><a href="#" title="">Unsaved</a></li>
                <li><a href="#" title="">Unbid</a></li>
                <li><a href="#" title="">Close</a></li>
                <li><a href="#" title="">Hide</a></li>
            </ul>
        </div>
    </div>

    <div class="epi-sec">
        <ul class="descp">
            <li><img src="images/icon8.png" alt=""><span><?php echo $p_company;?></span></li>
            <li><img src="images/icon9.png" alt=""><span><?php echo $p_location;?></span></li>
        </ul>
        <ul class="bk-links">
            <li><a href="#" title=""><i class="la la-bookmark"></i></a></li>
            <li><a href="#" title=""><i class="la la-envelope"></i></a></li>
        </ul>
    </div>

    <div class="job_descp">
        <h3><?php echo $p_title;?></h3>
        <ul class="job-dt">
            <li><a href="#" title=""><?php echo $p_type;?></a></li>
            <li><span><?php echo $p_price;?> / hr</span></li>
        </ul>

        <p class="show-read-more"><?php echo $p_message;?></p>

        <ul class="skill-tags">

        <?php


            $categories = '';
            $cats = explode(" ", $p_skill);
            foreach($cats as $cat) {
                $cat = trim($cat);
                $categories .= "<li><a href='#'' title=''>" . $cat . "</a></li>\n";

            }

            echo $categories;



        ?>

            <!--
            <li><a href="#" title="">HTML</a></li>
            <li><a href="#" title="">PHP</a></li>
            <li><a href="#" title="">CSS</a></li>
            <li><a href="#" title="">Javascript</a></li>
            <li><a href="#" title="">Wordpress</a></li>     -->
        </ul>
    </div>

    <div class="job-status-bar">
        <ul class="like-com">
            <li>
                <a href="#"><i class="la la-heart"></i> Like</a>
                <img src="images/liked-img.png" alt="">
                <span>25</span>
            </li> 
            <li><a href="#" title="" class="com"><img src="images/com.png" alt=""> Comment 15</a></li>
        </ul>
        <a><i class="la la-eye"></i>Views 50</a>
    </div>




    <div class="comment-section">


        <div class="post-comment">

            <div class="cm_img">
                <img src="http://via.placeholder.com/40x40" alt="">
            </div>

            <div class="comment_box">
                <form>
                    <input type="text" placeholder="Post a comment">
                    <button type="submit">Send</button>
                </form>
            </div>
        </div><!--post-comment end-->
    </div>

</div><!--post-bar end-->

Скрипт дополнительных параметров

<script>
 $(document).ready(function(){
  var maxLength = 100;
  $(".show-read-more").each(function(){
    var myStr = $(this).text();
    if($.trim(myStr).length > maxLength){
        var newStr = myStr.substring(0, maxLength);
        var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
        $(this).empty().html(newStr);
        $(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>');
        $(this).append('<span class="more-text">' + removedStr + '</span>');
    }
});
$(".read-more").click(function(){
    $(this).siblings(".more-text").contents().unwrap();
    $(this).remove();
});

});