独立运行相同的javascript

在下面的演示中，我遇到了一个问题，就是如何让代码工作两次（或更多次）

我只是想添加更多的“before/after”图像，但似乎可拖动的栏只对主图像起作用，并将移动应用于其他图像

是否有任何解决方案可以使它独立于每一项工作

错误可能出现在哪里：

$(function(){
  var $dragMe               = $("#dragme");
  var $beforeAfter      = $("#before-after");
  var $viewAfter          = $(".view-after");

  Draggable.create($dragMe, {
      type:"left",
      bounds: $beforeAfter,
      onDrag:updateImages
  });

---

演示：

正如@Jonas Grumman在我之前的帖子中所回答的，解决方案如下：

主要问题是在同一html页面上执行两个ID标记

另外，这是我的错误，因为我忘了在css上更改它，所以只关注html和javascript是一个错误

因此，修改以下部分就足够了：

HTML（之前）：

Javascript（之后）：

CSS（之前）：

CSS（之后）：

---

Batu Zet所说的是正确的，请注意，在同一个html页面中使用相同的ID是无效的html。很抱歉我的第一条评论，当你说独立于每个页面工作时，我没有正确地看到这一行。在这种情况下，你只需要分别为每个按钮制作这些按钮，并为你的divs提供唯一的id，然后分别为这些id创建draggable。我错了！我刚刚发现我没有更改css上的#dragme类，因此我认为这是一个Javascript问题，因为在HTML上修改它&Javascript不起作用。谢谢你们的时间，伙计们！用

$

作为JavaScript变量名的前缀不是很常见。我建议不要这样做。

<div id="dragme"></div>

<div class="dragme"></div>

var $dragMe  = $("#dragme");

var $dragMe  = $(".dragme");

#dragme{
        some css styles here
        }

.dragme{
        some css styles here
        }