Showing a new post available button when database have new rows php

currently what I did is that I used Jquery ready function to load the data from the database instead of refreshing a page. The issue I face is that I have used the word limit to show read more option to show the remaining message. Since I have used an interval function it keeps on loading the content again and again. Is there any idea or solution would help me?

Thanks in advance.

Script to load the data

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

get_post.php File

<?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-->

The read more option script

<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();
});

});