title: bug in next and prev buttons of carousel
body: <p>i create 2 carousels. Both are clone with the same .css and .js file but the problem is that the fist carousel's next and prev buttons are working properly bu the second carousel's next and prev button are not working.
  Why this is happen.can you please solve it.
  I also tried by renaming second carousel's classes and id's, and make another css file and js for it. but it is again not working.
  please say what Can u do.
  here is html file</p>
  <pre><code>&lt;div id=&quot;wrapper&quot;&gt;
      &lt;div id=&quot;carousel&quot;&gt;
          &lt;div id=&quot;content&quot;&gt;
              &lt;a href=&quot;&quot;&gt; &lt;img class=&quot;item&quot; src=&quot;images/b1.jpg&quot; /&gt;&lt;/a&gt;
              &lt;a href=&quot;&quot;&gt; &lt;img class=&quot;item&quot; src=&quot;images/images (2).jpeg&quot; /&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;button id=&quot;prev&quot;&gt;
          &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot;&gt;
              &lt;path fill=&quot;none&quot; d=&quot;M0 0h24v24H0V0z&quot; /&gt;
              &lt;path d=&quot;M15.61 7.41L14.2 6l-6 6 6 6 1.41-1.41L11.03 12l4.58-4.59z&quot; /&gt;
          &lt;/svg&gt;
      &lt;/button&gt;
      &lt;button id=&quot;next&quot;&gt;
          &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot;&gt;
              &lt;path fill=&quot;none&quot; d=&quot;M0 0h24v24H0V0z&quot; /&gt;
              &lt;path d=&quot;M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z&quot; /&gt;
          &lt;/svg&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div id=&quot;wrapper&quot;&gt;
      &lt;div id=&quot;carousel&quot;&gt;
          &lt;div id=&quot;content&quot;&gt;
              &lt;a href=&quot;&quot;&gt; &lt;img class=&quot;item&quot; src=&quot;images/b1.jpg&quot; /&gt;&lt;/a&gt;
              &lt;a href=&quot;&quot;&gt; &lt;img class=&quot;item&quot; src=&quot;images/images (2).jpeg&quot; /&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;button id=&quot;prev&quot;&gt;
          &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot;&gt;
              &lt;path fill=&quot;none&quot; d=&quot;M0 0h24v24H0V0z&quot; /&gt;
              &lt;path d=&quot;M15.61 7.41L14.2 6l-6 6 6 6 1.41-1.41L11.03 12l4.58-4.59z&quot; /&gt;
          &lt;/svg&gt;
      &lt;/button&gt;
      &lt;button id=&quot;next&quot;&gt;
          &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot;&gt;
              &lt;path fill=&quot;none&quot; d=&quot;M0 0h24v24H0V0z&quot; /&gt;
              &lt;path d=&quot;M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z&quot; /&gt;
          &lt;/svg&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>#wrapper {
    width: 100%;
    max-width: 964px;
    position: relative;
  }
  
  #carousel {
    overflow: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  
  #carousel::-webkit-scrollbar {
    height: 0;
  }
  
  #prev,
  #next {
    display: flex;
    justify-content: center;
    align-content: center;
    background: white;
    border: none;
    padding: 8px;
    border-radius: 50%;
    outline: 0;
    cursor: pointer;
    position: absolute;
  }
  
  #prev {
    top: 50%;
    left: 0;
    transform: translate(50%, -50%);
    display: none;
  }
  
  #next {
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
  }
  
  #content {
    display: grid;
    grid-gap: 16px;
    grid-auto-flow: column;
    margin: auto;
    box-sizing: border-box;
  }
  
  .item {
    width: 200px;
    height: 250px;
    background: green;
  }
  </code></pre>
  <p><strong>JavaScript</strong></p>
  <pre><code>const gap = 16;
  const carousel = document.getElementById(&quot;carousel&quot;),
    content = document.getElementById(&quot;content&quot;),
    next = document.getElementById(&quot;next&quot;),
    prev = document.getElementById(&quot;prev&quot;);
  
  next.addEventListener(&quot;click&quot;, e =&gt; {
    carousel.scrollBy(width + gap, 0);
    if (carousel.scrollWidth !== 0) {
      prev.style.display = &quot;flex&quot;;
    }
    if (content.scrollWidth - width - gap &lt;= carousel.scrollLeft + width) {
      next.style.display = &quot;none&quot;;
    }
  });
  prev.addEventListener(&quot;click&quot;, e =&gt; {
    carousel.scrollBy(-(width + gap), 0);
    if (carousel.scrollLeft - width - gap &lt;= 0) {
      prev.style.display = &quot;none&quot;;
    }
    if (!content.scrollWidth - width - gap &lt;= carousel.scrollLeft + width) {
      next.style.display = &quot;flex&quot;;
    }
  });
  
  let width = carousel.offsetWidth;
  window.addEventListener(&quot;resize&quot;, e =&gt; (width = carousel.offsetWidth));
                
             
  </code></pre>
  <p>here first carousel is perfact but seconds next and prev buttons are not working..even everything is same.</p>