Hints for your approach:
You have different mistakes in your code:
- You have more than one
id="more". - You try to use an opening
<span>tag but you don’t use the closing part</span>.
Here is a small working example similar to your code but it is not the best solution for your problem.
I changed html id to class to query more than one <span> element
$(function(){
var nextMore = 0;
$("#load").click(function(e){
e.preventDefault();
$(".more").slice(nextMore, nextMore + 1 ).show();
nextMore += 1;
if($(".more").length - nextMore == 0){
alert("No more");
}
});
});.more { display: none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<p>Content</p>
<span class="more">
<p>Content</p>
</span>
<span class="more">
<p>Content</p>
</span>
<span class="more">
<p>Content</p>
</span>
<a href="#" id="load">Load More</a>(More) appropriate Approach:
As mentioned by other commentators, I guess you try to do something like this to add/ append more html elements (e.g. buttons) to your html document:
$(document).ready(function(){
$("#btn").click(function(){
$("ol").append("<li>Content</li>");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<ol>
<li>Content</li>
</ol>
<button id="btn">Append Content items</button>