动态添加SharePoint People picker控件仅最后一个可输入用户问题求助

• 代码中document.getElementById("msdetail").innerHTML += 新增内容的写法是核心问题：innerHTML += 操作会先把容器内所有已存在的DOM节点全部清空销毁，再把原有内容+新内容拼接后重新渲染，之前已经初始化完成的People Picker控件绑定的事件、生成的内部输入元素会被完全清除，只有最后一次新增后初始化的控件能保留完整结构正常使用。
• 额外隐藏问题：新增行里的提示label用了固定id RecipientsInfo，重复id会导致DOM操作异常；原计数逻辑统计的是.form-group-5的长度，但新增行的类是.form-group-6，计数错误可能导致行id重复。

把innerHTML +=替换为insertAdjacentHTML方法，该方法只会在指定位置插入新DOM节点，不会修改已存在的节点，原有控件的结构和事件都会被保留，同时修复计数和重复id问题。

$("#add-new-msdetail").click( e => {
    // 修正计数：统计已存在的form-group-6行数量
    var cnt = $('.form-group-6').length;
    var id = cnt + 1;
    // 用insertAdjacentHTML插入新内容，不影响原有DOM
    document.getElementById("msdetail").insertAdjacentHTML('beforeend',
    `<br><br><hr/>
    <div class="form-group-6" id="TrackerDtl${id}">   
    <div class="form-item">
        <span>${id}</span>
        </div>                                                                                                                   
        <div class="form-item">                                                
            <label class="labelcl" for="shorttitle">Action(s)<span style="color: red;"> *</span></label>
            <textarea class="span6 form-control" rows="2" id="ctrlAction${id}" placeholder="Action name" required></textarea>   

        </div>
        <div class="form-item">                                              
            <label class="labelcl" for="Description">Milestone(s) Description<span style="color: red;"> *</span></label>
            <textarea class="span6 form-control" rows="3" id="ctrlTxtDescription${id}" placeholder="Description" required></textarea>
        </div>

        <div class="form-item">
            <label class="labelcl" for="shorttitle">Recipient(s)<span style="color: red;"> *</span></label>
            <div id="ctrlpplRecipients${id}"></div>
            <input type="hidden" id="ctrlTxtRecipientID${id}" />    
            <!-- 修正id重复问题 -->
            <label id="RecipientsInfo${id}" style="display:none; color:red">Please enter a valid user</label>                          

        </div>
        
        <div class="form-item">
            <label class="labelcl" for="shorttitle">Due Date<span style="color: red;"> *</span></label>
            <input class="form-control" type="date" id="ctrlDTDueDate${id}" style="border: 1px solid #b3b3b3;"/>
        </div>                  
                                                                                    
    </div>`);
    initializePeoplePicker(`ctrlpplRecipients${id}`, true);
})

修改后每次新增行不会重置已有的DOM结构，所有初始化完成的People Picker都会保留内部输入元素和事件绑定，所有行的人员选择控件都可正常搜索输入。

内容的提问来源于stack exchange，提问作者MWAN001