read more button shows again after click - php

Question

i have a readmore link that allows people to read more posts once it has been clicked, what i don't want is the button showing again and i also don't want the whole post to show again, i just want the remaining posts to add to the previous that the reader has read or being reading just as its done on facebook page when you click seemore link.
Thanks
$(function(){
$(".readMore").click(function(event){
event.preventDefault();
var link = $(this).attr('href');
var dataString = 'link='+ link;
$.ajax({
type : "POST",
url: "readmore-post.php",
data: dataString,
cache : false,
success: function(html){
$(".read_more").before(html);
}
});
});
});
this is the html part
<?php echo substr($post,0,250); ?>..
<?php
if(strlen($post)>250)
{
echo"<a href='$postID' style='font-size:0.8em;' class='readMore'>readmore</a> </br>";
}
?>
<div class="read_more"></div>
this is the php part
<?php
include('../config/connect.php');
$read_id = $_POST['link'];
$srm = "SELECT * FROM page_timeline WHERE timelineID='$read_id' ORDER BY timelineID DESC";
$sre = $db->query($srm);
while($rowr = $sre->fetch_array())
{
$postID = $rowr['timelineID'];
$post = $rowr['post'];
}
echo "<p>".$post."</p>";
?>

Answer 1

Try this and see inline comments
$(function(){
$(".readMore").click(function(event){
event.preventDefault();
var that=$(this);
var link = $(this).attr('href');
var dataString = 'link='+ link;
$.ajax({
type : "POST",
url: "readmore-post.php",
data: dataString,
cache : false,
success: function(html){
$(".read_more").empty().append(html);
//clear all the contents and append new one to .read_more div
that.hide(); //hide the button on successful load
},
});
});
});