Simple read more button not working on 2 paragraphs-CodePudding

I was trying to add 2 and more read more button so that my viewers can view the story or about the subject before downloading it. So I wrote this code with the help of internet but it is only working on 1 paragraph not second. I even don't have much knowledge about jQuery. Thanks in advance.

$(document).ready(function () {
    $("#toggle").click(function () {
        var elem = $("#toggle").text();
        if (elem == "Read More") {
            //Stuff to do when btn is in the read more state
            $("#toggle").text("Read Less");
            $("#text").slideDown();
        } else {
            //Stuff to do when btn is in the read less state
            $("#toggle").text("Read More");
            $("#text").slideUp();
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 style="font-family: IMFell">Story:</h4>
            <div>
                <p style="font-size: 18px">
                    In 1986, mobster Tommy Vercetti (voiced by Ray Liotta) is released from prison after serving a fifteen-year sentence for murder. His boss Sonny Forelli (Tom Sizemore), seeking to establish drug operations in the south, sends Tommy to Vice City following his release, to oversee an important drug deal alongside crooked lawyer Ken Rosenberg (William Fichtner).</p>
                    <span id="text" style="display: none; font-size: 18px; color: #000000">However, the deal is ambushed by unknown assailants, with Tommy and Ken barely escaping it. Angered upon hearing the news, Sonny orders Tommy to recover the drugs, alongside the money he gave to him, under threat of consequences. Seeking information, Ken points Tommy towards Colonel Juan Garcia Cortez (Robert Davi), who helped set up the exchange. Expressing regret for the ambush, Cortez promises to find out who masterminded it.<br>
                        <br>While investigating, Tommy meets with several people who offer him help: music producer Kent Paul (Danny Dyer), who maintains connections with the city's criminal underworld; Lance Vance (Philip Michael Thomas), who aided in the deal and lost his brother in the ambush; Texan real estate developer Avery Carrington (Burt Reynolds), who in return enlists Tommy's help with several deals; and drug kingpin Ricardo Diaz (Luis Guzmán), who employs both Tommy and Lance, but treats them as nothing but lackeys. Eventually, Cortez begins voicing his suspicions that Diaz organised the ambush. Upon further investigation, Lance discovers this to be the truth and, against Tommy's advice, tries to kill Diaz, only to get himself captured. After Tommy saves Lance, the pair find themselves forced to kill Diaz before he can retaliate. With Diaz dead, Tommy takes over his assets and, at Avery's suggestion, works to expand his new criminal empire by forcing businesses to pay him protection money and buying out nearly bankrupt companies to use as fronts for illicit operations. At the same time, Tommy provides assistance to several prominent gang leaders in the hopes they will support his expansion, and helps Cortez flee the city with stolen military equipment.<br>
                        <br>Eventually, Sonny discovers that Tommy has gained complete control over Vice City's drug trade without cutting the Forellis in. Enraged at his independence, Sonny sends mobsters to forcefully collect money from Tommy's businesses. In response, Tommy kills Sonny's men and severs his ties with him. Later, learning Sonny is personally coming to Vice City to collect what he believes he is owed, Tommy prepares to pay him tribute with counterfeit money. However, Sonny reveals that he was responsible for Tommy's arrest fifteen years prior, and that Lance has betrayed him and allied himself with the Forellis, having felt inadequate in Tommy's presence since his rise to power. A shootout ensues in Tommy's mansion, during which he prevents the Forellis from stealing his money and murders Lance for his betrayal, before finally killing Sonny in a tense standoff. When Ken arrives to a scene of carnage, Tommy quickly reassures him that everything is now fine, as he has finally established himself as the undisputed crime kingpin of Vice City.
                    </span>
            </div>
            <div >
                <button id="toggle">Read More</button>
            </div>
            <br>
            <h4 style="font-family: IMFell">About:</h4>
            <div>
                <p style="font-size: 18px">Grand Theft Auto: Vice City is a 2002 action-adventure game developed by Rockstar North and published by Rockstar Games. It is the fourth main entry in the Grand Theft Auto series, following 2001's Grand Theft Auto III. Set in 1986 within the fictional Vice City, based on Miami, the single-player story follows mobster Tommy</p>
                    <span id="text" style="display: none; font-size: 18px; color: #000000">Vercetti's rise to power after his release from prison and being caught up in an ambushed drug deal. While seeking out those responsible, he slowly builds an empire by seizing power from other criminal organisations in the city.<br>
                        <br>The game is played from a third-person perspective and its world is navigated on foot or by vehicle. The open world design lets the player freely roam Vice City, consisting of two main islands. The game's plot is based on multiple real-world people and events in Miami such as Cubans, Haitians, and biker gangs, the 1980s crack epidemic, the Mafioso drug lords of Miami, and the dominance of glam metal. The game was also influenced by the film and television of the era, most notably Scarface and Miami Vice. Much of the development work constituted creating the game world to fit the inspiration and time period; the development team conducted extensive field research in Miami while creating the world. The game was released in October 2002 for the PlayStation 2, in May 2003 for Microsoft Windows, and in October 2003 for the Xbox.<br>
                        <br>Upon release, Vice City received critical acclaim, with praise particularly directed at its music, gameplay and open world design. However, the game also generated controversy over its depiction of violence and racial groups, sparking lawsuits and protests. Vice City became the best-selling video game of 2002 and has sold over 17.5 million copies. Considered one of the most significant titles of the sixth generation of video games and one of the greatest video games ever made, it won numerous year-end accolades including Game of the Year awards from several gaming publications. Since its release, the game has received numerous ports to many gaming platforms. An enhanced version was released for mobile platforms in 2012 for the game's tenth anniversary. Its successor, Grand Theft Auto: San Andreas, was released in 2004, and a prequel, Vice City Stories, was released in 2006.
                    </span>
            </div>
            <div >
                <button id="toggle">Read More</button>
            </div>

CodePudding user response：

The issue with your code is because you're repeating the same id on multiple elements. As id need to be unique, selecting by the id only returns the first element.

To fix your problem remove the id and use common class attributes on the elements instead. From there you can use DOM traversal methods, such as closest() and prev() to target the content which needs to be toggled.

In addition, avoid putting CSS in your HTML using style attributes. Use external stylesheets, as I've done in the following example.

jQuery($ => {
  $(".toggle").on('click', e => {
    let $button = $(e.target);
    let $target = $button.closest('.btn-container').prev('div').find('span.text').slideToggle(() => {
      $button.text($target.is(':visible') ? 'Read Less' : 'Read More');
    });
  });
});

h4 {
  font-family: IMFell;
}

p {
  font-size: 18px;
}

span.text {
  display: none;
  font-size: 18px;
  color: #000000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4>Story:</h4>
<div>
  <p>
    In 1986, mobster Tommy Vercetti (voiced by Ray Liotta) is released from prison after serving a fifteen-year sentence for murder. His boss Sonny Forelli (Tom Sizemore), seeking to establish drug operations in the south, sends Tommy to Vice City following his release, to oversee an important drug deal alongside crooked lawyer Ken Rosenberg (William Fichtner).
  </p>
  <span >
    However, the deal is ambushed by unknown assailants, with Tommy and Ken barely escaping it. Angered upon hearing the news, Sonny orders Tommy to recover the drugs, alongside the money he gave to him, under threat of consequences. Seeking information, Ken points Tommy towards Colonel Juan Garcia Cortez (Robert Davi), who helped set up the exchange. Expressing regret for the ambush, Cortez promises to find out who masterminded it.<br><br>
    While investigating, Tommy meets with several people who offer him help: music producer Kent Paul (Danny Dyer), who maintains connections with the city's criminal underworld; Lance Vance (Philip Michael Thomas), who aided in the deal and lost his brother in the ambush; Texan real estate developer Avery Carrington (Burt Reynolds), who in return enlists Tommy's help with several deals; and drug kingpin Ricardo Diaz (Luis Guzmán), who employs both Tommy and Lance, but treats them as nothing but lackeys. Eventually, Cortez begins voicing his suspicions that Diaz organised the ambush. Upon further investigation, Lance discovers this to be the truth and, against Tommy's advice, tries to kill Diaz, only to get himself captured. After Tommy saves Lance, the pair find themselves forced to kill Diaz before he can retaliate. With Diaz dead, Tommy takes over his assets and, at Avery's suggestion, works to expand his new criminal empire by forcing businesses to pay him protection money and buying out nearly bankrupt companies to use as fronts for illicit operations. At the same time, Tommy provides assistance to several prominent gang leaders in the hopes they will support his expansion, and helps Cortez flee the city with stolen military equipment.<br><br>
    Eventually, Sonny discovers that Tommy has gained complete control over Vice City's drug trade without cutting the Forellis in. Enraged at his independence, Sonny sends mobsters to forcefully collect money from Tommy's businesses. In response, Tommy kills Sonny's men and severs his ties with him. Later, learning Sonny is personally coming to Vice City to collect what he believes he is owed, Tommy prepares to pay him tribute with counterfeit money. However, Sonny reveals that he was responsible for Tommy's arrest fifteen years prior, and that Lance has betrayed him and allied himself with the Forellis, having felt inadequate in Tommy's presence since his rise to power. A shootout ensues in Tommy's mansion, during which he prevents the Forellis from stealing his money and murders Lance for his betrayal, before finally killing Sonny in a tense standoff. When Ken arrives to a scene of carnage, Tommy quickly reassures him that everything is now fine, as he has finally established himself as the undisputed crime kingpin of Vice City.
  </span>
</div>
<div >
  <button >Read More</button>
</div><br>

<h4>About:</h4>
<div>
  <p>
    Grand Theft Auto: Vice City is a 2002 action-adventure game developed by Rockstar North and published by Rockstar Games. It is the fourth main entry in the Grand Theft Auto series, following 2001's Grand Theft Auto III. Set in 1986 within the fictional Vice City, based on Miami, the single-player story follows mobster Tommy
  </p>
  <span >
    Vercetti's rise to power after his release from prison and being caught up in an ambushed drug deal. While seeking out those responsible, he slowly builds an empire by seizing power from other criminal organisations in the city.<br><br>
    The game is played from a third-person perspective and its world is navigated on foot or by vehicle. The open world design lets the player freely roam Vice City, consisting of two main islands. The game's plot is based on multiple real-world people and events in Miami such as Cubans, Haitians, and biker gangs, the 1980s crack epidemic, the Mafioso drug lords of Miami, and the dominance of glam metal. The game was also influenced by the film and television of the era, most notably Scarface and Miami Vice. Much of the development work constituted creating the game world to fit the inspiration and time period; the development team conducted extensive field research in Miami while creating the world. The game was released in October 2002 for the PlayStation 2, in May 2003 for Microsoft Windows, and in October 2003 for the Xbox.<br><br>
    Upon release, Vice City received critical acclaim, with praise particularly directed at its music, gameplay and open world design. However, the game also generated controversy over its depiction of violence and racial groups, sparking lawsuits and protests. Vice City became the best-selling video game of 2002 and has sold over 17.5 million copies. Considered one of the most significant titles of the sixth generation of video games and one of the greatest video games ever made, it won numerous year-end accolades including Game of the Year awards from several gaming publications. Since its release, the game has received numerous ports to many gaming platforms. An enhanced version was released for mobile platforms in 2012 for the game's tenth anniversary. Its successor, Grand Theft Auto: San Andreas, was released in 2004, and a prequel, Vice City Stories, was released in 2006.
  </span>
</div>
<div >
  <button >Read More</button>
</div>