How to use class instead of Id for SharePoint PeoplePicker using JavaScript

Question

I have created a Form on SharePoint using SPD, where I have used SharePoint PeoplePicker to get the User automatically.

Below is the code:-

    $(document).ready(function () {

        // Specify the unique ID of the DOM element where the
        // picker will render.
        initializePeoplePicker('temp');
       //How can I use class here.
       //initializePeoplePicker('classnamehere')

    });


// Render and initialize the client-side People Picker.
    function initializePeoplePicker(peoplePickerElementId) {

        // Create a schema to store picker properties, and set the properties.
        var schema = {};
        schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
        schema['SearchPrincipalSource'] = 15;
        schema['ResolvePrincipalSource'] = 15;
        schema['AllowMultipleValues'] = false;
        schema['MaximumEntitySuggestions'] = 50;
        schema['Width'] = '180px';

        // 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);
       $("temp_TopSpan").removeAttr("style").attr("style","width:180px");

    }

The above code works fine for the unique Id.

How can I run this function for a class instead if ID. Because I am Adding new rows in the table dynamically and each new row with 2nd column should have peoplepicker div.

Answer 1

The client side people picker internally has the following components:

1. An input text box to enter names for users, groups, and claims.
2. A span control that shows the names of resolved users, groups, and claims.
3. A hidden div element that autofills a drop-down box with matching query results.
4. An autofill control.

Client People Picker adds "TopSpan" string to the Id of hidden div and not class.

So you have to use only ID to get the resolved users or any other details from people picker.

For your case you can use counter for Ids like temp1, temp2, temp3, etc. That will be easy for you.