javascript - 同一个页面重复使用一个js插件，后面的无效问题

Question

这是我用插件实现的效果

代码：

<p style="overflow: hidden;">
    <p id="iphone">
        <p id="example">
            <p id="slides">
                <p id="imgcontainer" class="slides_container">
                </p>
                <a href="#" class="prev"><img class="png" src="~/webimgs/prev.png" alt="Arrow Prev" /></a>
                <a href="#" class="next"><img class="png" src="~/webimgs/next.png" alt="Arrow Next" /></a>
            </p>
        </p>
    </p>
    <p id="morePic" style="overflow: hidden; padding-top: 84px; position: relative; left: -113px;margin-top: 5em;">
    </p>
</p>

这样的代码就实现这样一个效果，但是我现在需要实现下面的效果

在同一个页面中有多个这样的排版，于是我将上面的代码复制了一个

代号1就是上面的代码，代号2是我复制的一个
达到效果：

但是复制的这一个没能将插件的效果达到，里面的图片是空的，按钮也没被添加事件！
插件名称：slides.min.jquery.js
插件下载：手机界面切换

问题，如何实现一个页面多个重复的使用这个插件

Answer 1

id="imgcontainer"
估计是通过id去读取的按钮，id是唯一的，不可以被读两个。

找源代码，加一个class，用class去读。

Answer 2

类名被占用了

Answer 3

p1和p2是不是使用了相同的id，同一个页面不允许存在相同的id