前端el循环模态框冲突问题

Question

为什么用el表达式生成的模态框只能点击第一个，后面的无法点击生成
以下是前端界面

<tbody id="tdata">
                    {% for obj in VCD %}
                <tr class="trHover">
                    <td><input type="checkbox"></td>
                    <td class="test" value="0001">{{obj.0}}</td>
                    <td class="test" value="0002">{{obj.1}}</td>
                    <td class="test" value="0003">{{obj.2}}</td>
                    <td class="test" value="0004">{{obj.3}}</td>
                    <td class="test" value="0005">{{obj.4}}</td>
                    <td class="test" value="0006">{{obj.5}}</td>
                    <td>
                        <button id="edit_id" class="viewInf">查看</button>
                        <button class="updateInf" onclick="edit(this)">修改</button>
                    </td>
                </tr>
                {% endfor %}
                </tbody>

查看功能只能点击第一个，后面无法生成

 <!--查看的模态框-->
            <div id="modal viewfade" class="mymodal_2">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4>查看VCD信息</h4>
                        <span id="closeBtn1" class="close">×</span>
                    </div>
  
                    <div class="modal-body">
                        <p>
                            VCD编号：<input type="text" name="Vno" placeholder="{{VCD.0.0}}">
                        </p>
                        <p>
                            VCD姓名：<input type="text" name="Vname" placeholder="{{VCD.0.1}}">
                        </p>
                        <p>
                            VCD作者：<input type="text" name="Actor" placeholder="{{VCD.0.2}}">
                        </p>
                        <p>
                            VCD价格：<input type="text" name="Price" placeholder="{{VCD.0.3}}">
                        </p>
                        <p>
                            VCD类型：<input type="text" name="Vtype" placeholder="{{VCD.0.4}}">
                        </p>
                        <p>
                            VCD库存：<input type="text" name="amount" placeholder="{{VCD.0.5}}">
                        </p>
                    </div>
                    <div class="modal-footer">
                        <div class="pageInfoBox"></div>
                        <button class="addButton_no">取消</button>
                    </div>
                </div>
            </div>

下面的查看的js代码

// 查看
    (function() {
        /*建立模态框对象*/
        var modalBox = {};
        /*获取模态框*/
        modalBox.modal = document.getElementById("modal viewfade");
        /*获得trigger按钮*/
        modalBox.triggerBtn = document.getElementById("edit_id");
        /*获得关闭按钮*/
        modalBox.closeBtn = document.getElementById("closeBtn1");
        /*模态框显示*/
        modalBox.show = function() {
            console.log(this.modal);
            this.modal.style.display = "block";
        }
        /*模态框关闭*/
        modalBox.close = function() {
            this.modal.style.display = "none";
        }
        /*当用户点击模态框内容之外的区域，模态框也会关闭*/
        modalBox.outsideClick = function() {
            var modal = this.modal;
            window.onclick = function(event) {
                if(event.target == modal) {
                    modal.style.display = "none";
                }
            }
        }
        modalBox.init = function() {
            var that = this;
            this.triggerBtn.onclick = function() {
                that.show();
            }
            this.closeBtn.onclick = function() {
                that.close();
            }
            this.outsideClick();
        }
        modalBox.init();
    })();

Answer 1

id相同，获取就是第一个id，后面的就不生效了。