Load more data using ajax

[harman30]

Here in my code below I display posts in table that has 3 columns i am limiting posts so initially only two rows are visible now I want to add load more button which shows few more posts and then few more untill all posts are viewed I tried many ajax and javascript codes but couldn't find a way.
This is my full code with two files here problem is once I click load more same six posts appear again so how to call next six posts by id and another problem after i click show more button it changes to loading and after that it doesn't go away though the new posts have a show more button under them but last show more button is replaced by loading which always remains there.
mains.php

<script type="text/javascript">
$(document).ready(function(){
    $(document).on('click','.show_more',function(){
        var ID = $(this).attr('id');
        $('.show_more').hide();
        $('.loding').show();
        $.ajax({
            type:'POST',
            url:'ajax_more.php',
            data:'id='+ID,
            success:function(html){
                $('#show_more_main'+ID).remove();
                $('#posts').append(html);
            }
        });
        
    });
});
</script>


    $sql = "SELECT * FROM posts order by id desc limit 6";
    $query = $db->prepare($sql);
    $query->execute();
    $row = $query->fetch(PDO::FETCH_ASSOC);
    $ID = $row['id'];

    <div id="posts"> 
    <table>
    <tr>
    <?php do { //horizontal looper?>
    <td>
    <div>id</div>          
    <div>title</div>
    <div>body</div>          
    <div>date</div>
    </td>
    <?php
    $row = $query->fetch(PDO::FETCH_ASSOC);
    if (!isset($nested_List)) {
    $nested_List= 1;
    }
    if (isset($row) && is_array($row) && $nested_List++%3==0) {
    echo "</tr><tr>";
    }
    } while ($row); //end horizontal looper 
    ?>
    </table>
    <div class="show_more_main" id="show_more_main<?php echo $ID; ?>">
<span id="<?php echo $ID; ?>" class="show_more" title="Load more posts">Show more</span>
<span class="loding" style="display: none;"><span class="loding_txt">Loading…</span></span>
</div>
    </div>

ajax_more.php

<?php
include('/inc/connect.inc.php');

if(isset($_POST["id"]) && !empty($_POST["id"])){

$sql = "SELECT * FROM posts order by id desc limit 6";
$query = $db->prepare($sql);
$query->execute();
$row = $query->fetch(PDO::FETCH_ASSOC);
$ID = $row['id'];
?>

<table>
    <tr>
    <?php do { //horizontal looper?>
    <td>
    <div>id</div>          
    <div>title</div>
    <div>body</div>          
    <div>date</div>
    </td>
    <?php
    $row = $query->fetch(PDO::FETCH_ASSOC);
    if (!isset($nested_List)) {
    $nested_List= 1;
    }
    if (isset($row) && is_array($row) && $nested_List++%3==0) {
    echo "</tr><tr>";
    }
    } while ($row); //end horizontal looper 
    ?>
    </table>
    <div class="show_more_main" id="show_more_main<?php echo $ID; ?>">
<span id="<?php echo $ID; ?>" class="show_more" title="Load more posts">Show more</span>
<span class="loding" style="display: none;"><span class="loding_txt">Loading…</span></span>
</div>
<?php
   }
?>

[Dormilich]

I tried many ajax and javascript codes but couldn't find a way.

so, what exactly have you tried and what didn’t work out?

PS. we’re not going to write your AJAX component for you.

[harman30]

I have updated my question may be now you can help.