title: Multiple read more/less buttons in JavaScript
body: <p>When clicked on first <code>Read more</code> button it works but <code>Read less</code> does not show up, however even on clicking rest <code>Read more</code> still the first one works. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction(id) {
    alert(id);
    var dots = document.getElementById("dots");
    var moreText = document.getElementById("more");
    if (dots.style.display === "none") {
      dots.style.display = "inline";
      id.innerHTML = "Read more";
      moreText.style.display = "none";
    } else {
      dots.style.display = "none";
      id.innerHTML = "Read less";
      moreText.style.display = "inline";
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Services Section --&gt;
  &lt;div id="services" class="section page-split"&gt;
    &lt;div class="section-wrapper block content-1170 center-relative"&gt;
      &lt;div class="bg-holder float-left"&gt;
        &lt;img src="images/left_obj_01.png" alt=""&gt;
      &lt;/div&gt;
      &lt;div class="section-title-holder float-left" data-background="#a13dd7"&gt;
        &lt;div class="section-num"&gt;
          &lt;span class="current-section-num"&gt;
            01
          &lt;/span&gt;
          &lt;span class="total-section-num"&gt;
            / 04
          &lt;/span&gt;
        &lt;/div&gt;
        &lt;h2 class="entry-title"&gt;
          Services
        &lt;/h2&gt;
        &lt;p class="page-desc"&gt;
          Permanence of the stars hundreds of thousands
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="section-content-holder float-right" style="margin-bottom: 30px;"&gt;
      &lt;div class="content-wrapper"&gt;
        &lt;div class="one_third animate wait-07s"&gt;
          &lt;div class="service-item"&gt;
            &lt;img class="service-icon" src="images/webdesign.png" alt=""&gt;
            &lt;p class="service-title"&gt;&lt;strong&gt;Web Designing Services&lt;/strong&gt;&lt;/p&gt;
            &lt;p&gt;
              Our Web Design Team consists of Professionals who have been designing websites for decades. With a wealth of experience and knowledge, we aim to provide.our clients with engaging interactive .
              &lt;span id="dots"&gt;...&lt;/span&gt;
              &lt;span id="more"&gt;
                lightning .and speed websites.Our Web Design Services in Portland, USA will surely improve your website ranking as well as traffic.Contact us today for a free consultation.
              &lt;/span&gt;
            &lt;/p&gt;
            &lt;button onclick="myFunction(this.id);" id="myBtn1" class="btn"&gt;Read More&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="one_third animate wait-05s"&gt;
        &lt;div class="service-item"&gt;
          &lt;img class="service-icon" src="images/webdev.png" alt=""&gt;
          &lt;p class="service-title"&gt;&lt;strong&gt;Web Development Services&lt;/strong&gt;&lt;/p&gt;
          &lt;p&gt;
            Searching for quality Web Development Services in Portland, USA? If yes, then are experts are here to offer you the best web development services.
            &lt;span id="dots"&gt;...&lt;/span&gt;
            &lt;span id="more"&gt;
              Our team consists of skilled and experienced full stack designers and developers. We have the expertise to provide high-end web solutions. Each and every website developed by us is tailored as per the requirements of your business and also as per the requirements in the market.
            &lt;/span&gt;
            &lt;/span&gt;
          &lt;/p&gt;
          &lt;button onclick="myFunction(this.id);" id="myBtn2" class="btn"&gt;Read More&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="one_third last animate wait-04s"&gt;
        &lt;div class="service-item"&gt;
          &lt;img class="service-icon" src="images/ecomm.png" alt=""&gt;
          &lt;p class="service-title"&gt;&lt;strong&gt;E-commerce Website Development&lt;/strong&gt;&lt;/p&gt;
          &lt;p&gt;
            Codevelop has been operating in the digital marketing sector for several years.We have been fortunate enough to have worked with several clients..
            &lt;span id="dots"&gt;...&lt;/span&gt;
            &lt;span id="more"&gt;
              from all around the world who are now successfully commencing business in the Ecommerce world..The primary objective of our company is to meet all your Ecommerce website development requirements so that you can attract more customers and simultaneously maximize your sales in the long run.Codevelop is the best Ecommerce website developer in all of Portland, USA as our company now aims to give you the best possible digital marketing solutions at affordable pricing points.
              &lt;/span&gt;
            &lt;/span&gt;
          &lt;/p&gt;
          &lt;button onclick="myFunction(this.id);" id="myBtn3" class="btn"&gt;Read More&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;div class="one_third animate wait-07s"&gt;
        &lt;div class="service-item"&gt;
          &lt;img class="service-icon" src="images/file.png" alt=""&gt;
          &lt;p class="service-title"&gt;&lt;strong&gt;Graphic Designing&lt;/strong&gt;&lt;/p&gt;
          &lt;p&gt;Build a stronger brand with the help of our Graphic Designing Services
            &lt;span class="para4" style="display:none;"&gt;
              With the ever-growing demand in the digital world, the level of competition is also increasing at
  a rate of knots. Therefore, companies must rely on impressive graphic designs in order to
  attract the attention of the target audience. Avail the services of Codevelop today and build a
  competitive advantage in favor of your brand within your target market.
  Our team of experts possesses the skills to meet all your requirements. Complete customer
  satisfaction is the sole objective of our company and we aim to achieve it at any cost.
            &lt;/span&gt;
            &lt;/span&gt;
          &lt;/p&gt;
          &lt;button onclick="myFunction(this.id);" id="myBtn4" class="btn"&gt;Read More&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="one_third animate wait-05s"&gt;
        &lt;div class="service-item"&gt;
          &lt;img class="service-icon" src="images/seo.png" alt=""&gt;
          &lt;p class="service-title"&gt;&lt;strong&gt;SEO Services&lt;/strong&gt;&lt;/p&gt;
          &lt;p&gt;
            Dominate all Search Engine Platforms by joining hands with Codevelop. Search
            &lt;span class="para5" style="display:none;"&gt;Engine Optimization or SEO is perhaps the most powerful tool that exists in the digital
  world today. If SEO strategies are correctly applied,
            &lt;/span&gt;
            &lt;/span&gt;
          &lt;/p&gt;
          &lt;button onclick="myFunction(this.id);" id="myBtn5" class="btn"&gt;Read More&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="one_third last animate wait-04s"&gt;
        &lt;div class="service-item"&gt;
          &lt;img class="service-icon" src="images/wordpress.png" alt=""&gt;
          &lt;p class="service-title"&gt;&lt;strong&gt;Word Press Services&lt;/strong&gt;&lt;/p&gt;
          &lt;p&gt;
            Want more stability for your business? Hire the experts at Codevelop. In order to
            &lt;span class="para6" style="display:none;"&gt;
              be relevant in the present market, it is essential that you have a website that is user-friendly, easily accessible, and can be adequately navigated. All these aspects and more can be achieved with the help of our services. Here at Codevelop, we possess a dedicated team of individuals who specialize in various fields of study. This is precisely why we are able to cater to the various digital marketing needs of our customers.
            &lt;/span&gt;
            &lt;/span&gt;
          &lt;/p&gt;
          &lt;button onclick="myFunction(this.id);" id="myBtn6" class="btn"&gt;Read more&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>