title: ajax load more button with different data
body: <p>I am using ajax on a load more button but the problem is whenever I click on load more button I am getting the same data every time from content.php which contains a mysql query to grab data from table.  </p>
  
  <p>How can I get  different data depending on id from that table that is initially ten rows are present and when I click on load more button next 10 rows should be appended with the data already present.  </p>
  
  <p>Data gets appended but it is the same data all the  times.<br>
  I also have data-id associated with load more button which is the id associated with the last element of the initially present element.</p>
  
  <pre><code>var collegename=$(this).attr("value");  
  var contentid=$(this).attr("data-id"); 
  
  $.ajax({
      type: "post",
      url: "content.php",
      data: 'contentid='+contentid+'&amp;collegename='+collegename,
      dataType: "text",                  
      success: function(response) {
          var $loaderImg =  $(this).parent().find(".loadingdata").hide();
          $content.html(response).prepend($loaderImg);
       }
  });
  </code></pre>
  
  <p>//content.php</p>
  
  <pre><code>$collegename     = isset($_POST["collegename"]) ? $_POST["collegename"] : 0;
  $query= "SELECT * FROM ".$collegename." ORDER BY rand() ";
  </code></pre>