Dynamically add SharePoint People picker controls but can enter user name only in last ppl picker control

Question

I use the following code to create row dynamically. Each row has a people picker field.

 $("#add-new-msdetail").click( e => {
    >     var cnt = $('.form-group-5').length;
    >     var id =cnt+1;
    > 
    >     document.getElementById( "msdetail" ).innerHTML +=  
    >     `<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}" />    
    >             <label id="RecipientsInfo" 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);
})

Each time a new row is added, the Recipients ppl picker control is created. However, only the last added ppl picker is allowed to search for user.

Other ppl picker controls don't allow enter value at all. for example, I have 3 rows and 3 ppl picker controls, only the last one allows me to input user name. It should allow to pick multiple users.

Here is the code to initialize ppl Picker control.

 > function initializePeoplePicker(peoplePickerElementId, allowMultipleValues =false)  {
    >  // Create a schema to store picker properties, and set the properties.  
    >  var schema = {};
    >  schema['PrincipalAccountType'] = 'User';
    >  //This value specifies where you would want to search for the valid values
    >  schema['SearchPrincipalSource'] = 15;
    >  //This value specifies where you would want to resolve for the valid values
    >     schema['ResolvePrincipalSource'] = 15;
    >     schema['AllowMultipleValues'] = allowMultipleValues;
    >     schema['MaximumEntitySuggestions'] = 50;
    >     
    >     // Commented out the width set here in order to style people picker element via css without !important 
    >     // schema['Width'] = '280px';
    >     
    >     // Render and initialize the picker.  
    >     // Pass the ID of the DOM element that contains the picker, an array of initial   
    >     // PickerEntity objects to set the picker value, and a schema that defines  
    >     // picker properties.              
    >             this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);  
}

Inspecting the ppl picker elements, SharePoint does generate the code needed.

Comparing the working people picker control, only the latest control has <inputelementid="ctrlpplFRERecipients2_TopSpan_EditorInput" style="top: 225px; left: -1px; display: none;">. It is not available on previous ppl controls created earlier.

Not sure why this input element was removed. Pls advise.

Answer 1

Found the fix to this issue:

Need to use appendChild (div), instead of using div.innerHTML+={new repeating section code}

var newdiv = document.createElement('div');
newdiv.setAttribute("id", "TrackerDtl"+id);
newdiv.setAttribute("class", "form-group-6");           
                
newdiv.innerHTML =`{all the code to create row}'; 
var curdiv = document.getElementById('msdetail');
curdiv.appendChild(newdiv); 
initializePeoplePicker(`ctrlpplRecipients${id}`, true);

This article gave me the idea:

Table input values resetting when adding rows with inputs in HTML and Javascript