HTML Javascript-获取带有ID的所有元素

我使用的是位于此处的waterwheel-carousel图像滑块。我想在一页上有多个转盘。

以下是我的代码片段：

<script>
    // load carousel
    $(document).ready(function () {
        $("#waterwheel-carousel").waterwheelCarousel({
            separation: 90,
            separationMultiplier: 0.2,
            horizonOffsetMultiplier: 1
        });
    });
</script>
.
.
.
<div id="waterwheel-carousel">
  <img src="" alt="one">
  <img src="" alt="two">
  <img src="" alt="three">
  <img src="" alt="four">
</div>     
<div id="waterwheel-carousel">
  <img src="" alt="one">
  <img src="" alt="two">
  <img src="" alt="three">
  <img src="" alt="four">
</div>  
<div id="waterwheel-carousel">
  <img src="" alt="one">
  <img src="" alt="two">
  <img src="" alt="three">
  <img src="" alt="four">
</div>  

和CSS：

/* Projects page carousel(s) */
#waterwheel-carousel {
  width: 200px;
  height: 216px;
  position: relative;
  clear: both;
  overflow: hidden;
  margin: 0 auto;
}
#waterwheel-carousel img {
  cursor: pointer;
  border: 5px solid black;
}

问题是只有第一个#waterwheel-carousel将被加载。另外两个没有。我做了一些研究，看起来它可能只返回带有该id的第一个元素。所以我在$(document).ready(..函数上尝试了一种不同的方法，将class="waterwheel-carousel"添加到每个div:

<script>
    $(document).ready(function () {
      var allElements = $(document).getElementsByClassName("waterwheel-carousel");
      for (var i = 0; i < allElements.length; i++) {
          var currentElement = allElements[i];
          currentElement.waterwheelCarousel({
              separation: 90,
              separationMultiplier: 0.2,
              horizonOffsetMultiplier: 1
          });
        }
    });
</script>

但随后它们全部都无法加载。

有人有什么想法吗？

谢谢。