Javascript 超过1个模态？

我有这个模式，并希望他们在同一页上的许多。我试了很多，但是没有。你知道怎么做吗？谢谢

代码如下：

HTML

JS

---

我尝试应用不同的名称、ID，但如果不复制所有内容，就没有好的结果。我认为这不是一种好的做法，是对代码的浪费。

请展示您尝试过的内容。它帮助我们理解您错过了什么，而不是为您编写代码（这里无论如何都不欢迎）。嗨，John！我不确定我们想要的效果：你想让模态彼此相邻，还是想让一个模态依次显示，一次只激活一个模态？嗨，Magelan，模态用一个按钮打开。我需要有很多按钮，每个按钮都会打开不同的模式。我尝试添加ID，区分名称，但没有任何效果

<div  class="containerofelements">
 <div id="s2-01" class="resizeratio">1.00</div>
  <div id="s-wrap" class="wrap" style="transform: scale(0.04);">
   <div class="elements" style="transform: scale(0.04);">
     <div id="s-rr"class="resizeratio">0.04</div>
      <div id="s-001" class="slider16" midicc="1, 80" colour="#ff3300"></div>
   </div>
 </div>
</div>

.containerofelements {
}
.resizeratio  {
  display: inline-block;
  cursor: pointer;
  border-style: solid;
  color: red;
  width: 50px;
  height: 20px;
}
.wrap {
  background-color: rgba(0, 80, 128, 1);
  transform-origin: 1880px 0;
}
.elements {
  width: 1600px;
  height: 800px;
  transform-origin: 1880px 0;
}

$(document).ready(function() {
$(".resizeratio").click(function() {
 var el = $('.elements');
  var scale = $(this).text();
   el.css({
    transform: "scale(" + scale + ")"
  });
 });
});
$(document).ready(function() {
 $(".resizeratio").click(function() {
  var el = $('.wrap');
  var scale = $(this).text();
   el.css({
    transform: "scale(" + scale + ")"
  });
 });
});