accordion中多个折叠框中的表单提交互不影响怎么实现？

分类：MUI

accordion

问题描述：
参照accordion.html做的带有表单输入的折叠面板，如图所示，ul下的每个li都是动态生成的

function fillData(rows, length, realCheckName) {  
                    var innerHTMLContent = '';  
                    for(var i = 0; i < length; i++) {  
                        var locationName = rows[i].locationName;  
                        var workShopName = rows[i].workShopName;  
                        var machineName = rows[i].machineName;  
                        var machineModel = rows[i].machineModel;  
                        var locationName = rows[i].locationName;  
                        var keyPointName = rows[i].keyPointName;  
                        var method = rows[i].methodName;  
                        var rules = rows[i].rules;  
                        var detailId = rows[i].detailId;  
                        innerHTMLContent += formatInnerHTML(locationName, workShopName, machineName, machineModel, locationName, keyPointName, method, rules, realCheckName, detailId)  
                    }  
                    document.getElementById("fillDataList").innerHTML = innerHTMLContent;  

                    var submitBtn = doc.getElementById('submitBtn');  
                    var detailIdHid = doc.getElementById('detailIdHid').value;  
                    submitBtn.addEventListener('tap', function(event) {  
                        alert(detailIdHid);  
                    });  
                }  

//组装ul下的每个li  
        function formatInnerHTML(locationName, workShopName, machineName, machineModel, locationName, keyPointName, method, rules, realCheckName, detailId) {  

                    var innerHtmlContent = "<li class='mui-table-view-cell mui-collapse'>" +  
                        "<a class='mui-navigate-right'  href='#'>" + locationName + "</a>" +  
                        "<div class='mui-collapse-content'>" +  
                        "<form class='mui-input-group'>" +  
                        "<input type='text' id='detailIdHid' value=" + detailId + ">" +  

                        "<div class='mui-button-row'>" +  
                        "<button class='mui-btn mui-btn-primary' style='width:100px;height:35px;font-size: 16px;' type='button' id='submitBtn'>提&nbsp;&nbsp;交</button>&nbsp;&nbsp;" +  
                        "<button class='mui-btn mui-btn-primary' style='width:100px;height:35px;font-size: 16px;' type='button'>取&nbsp;&nbsp;消</button>" +  
                        "</div>" +  
                        "</form>" +  
                        "</div>" +  
                        "</li>"  
                    return innerHtmlContent;  
                }

问题：

                var submitBtn = doc.getElementById('submitBtn');  
                var detailIdHid = doc.getElementById('detailIdHid').value;  
                submitBtn.addEventListener('tap', function(event) {  
                    alert(detailIdHid);  
                });

这段代码只能获取第一个li的内容后面的获取不到请问如何解决