I am currently working on a rather large project and I am encountering some issues with the read more buttons. As someone who is fairly new to JavaScript, I am still grappling with the concepts. While I have managed to make the function work for the first button, it does not seem to work for the others. Could you please point out where I might be going wrong?
$(document).ready(function() {
$("#read").click(function() {
$(this).prev().toggle();
$(this).siblings('.dots').
toggle("read");
if ($(this).text() == 'Read More') {
$(this).text('Read Less');
} else {
$(this).text('Read More');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>The Hound Group</h1>
<div class="container">
<h3>The Sighthounds</h3>
<p>
By definition, a sighthound is simply a dog breed that hunts primarily by sight and speed rather than by scent because of this they are sometimes refered to as Gazehounds. Because sighthounds hunt by sight, they need to have the speed and agility to keep
up with their prey in order to keep them in sight. Sighthound breeds typically have lean bodies, long legs, and a flexible back – they also have deep chests to support their unusually large hearts and lungs. To help you picture the typical sighthound
body, here is a list of breeds that are categorized as sighthounds:
<h4>Afghan Hound:</h4>
<p>
Wow very biscit stop it fren very hand that feed shibe heckin, many pats. Shooberino h*ck blep shoob sub woofer very taste wow shoober, snoot heckin mlem smol borking doggo with a long snoot for pats. Heck I am bekom fat pupperino borkdrive length boy,
such treat maximum borkdrive wow very biscit. Borking doggo clouds much ruin diet pupperino tungg super chub, very hand that feed shibe you are doin me a concern boofers
<span class="dots">...</span>
<div class="showmore">
<h5>Origin</h5>
Doggo ipsum smol borking doggo with a long snoot for pats bork mlem heckin much ruin diet lotsa pats I am bekom fat, doing me a frighten most angery pupper I have ever seen pats waggy wags vvv. big ol pupper big ol. Ur givin me a spook smol borking doggo
with a long snoot for pats big ol pupper long bois ur givin me a spook bork smol adorable doggo, the neighborhood pupper doing me a frighten puggorino tungg ur givin me a spook. Blep the neighborhood pupper heckin good boys big ol pupper noodle
horse, doge big ol blep. noodle horse shibe maximum borkdrive. Bork you are doing me a frighten boof pats, noodle horse extremely cuuuuuute you are doing me the shock borkf, boof borkf.
</p>
</div>
<button type="button" id="read" class="btn btn-info btn-xs">Read More</button>
<h4>Azwakah:</h4>
<p>
Wow very biscit stop it fren very hand that feed shibe heckin, many pats. Shooberino h*ck blep shoob sub woofer very taste wow shoober, snoot heckin mlem smol borking doggo with a long snoot for pats. Heck I am bekom fat pupperino borkdrive length boy,
such treat maximum borkdrive wow very biscit. Borking doggo clouds much ruin diet pupperino tungg super chub, very hand that feed shibe you are doin me a concern boofers
<span class="dots">...</span>
<div class="showmore">
<h5>Origin</h5>
Doggo ipsum smol borking doggo with a long snoot for pats bork mlem heckin much ruin diet lotsa pats I am bekom fat, doing me a frighten most angery pupper I have ever seen pats waggy wags vvv. big ol pupper big ol. Ur givin me a spook smol borking doggo
with a long snoot for pats big ol pupper long bois ur givin me a spook bork smol adorable doggo, the neighborhood pupper doing me a frighten puggorino tungg ur givin me a spook. Blep the neighborhood pupper heckin good boys big ol pupper noodle
horse, doge big ol blep. noodle horse shibe maximum borkdrive. Bork you are doing me a frighten boof pats, noodle horse extremely cuuuuuute you are doing me the shock borkf, boof borkf.
</p>
</div>
<button type="button" id="read" class="btn btn-info btn-xs">Read More</button>
While the script functions correctly for the first paragraph, it seems to falter for the second one. Can you shed some light on why this may be happening or suggest a better approach? Thank you