How to use People Picker field in a form using jQuery

Create a Page and add Script Editor web part to it and paste the below code.

Code -

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="_layouts/15/sp.runtime.js" type="text/javascript"> </script>
<script src="_layouts/15/sp.js" type="text/javascript"> </script>
<script src="_layouts/15/clienttemplates.js" type="text/javascript"></script>
<script src="_layouts/15/clientforms.js" type="text/javascript"></script>
<script src="_layouts/15/clientpeoplepicker.js" type="text/javascript"></script>
<script src="_layouts/15/autofill.js" type="text/javascript"></script>
<script src="_layouts/15/1033/strings.js" type="text/javascript"></script>



var ExtendedStaffEmails=[];
var txtProjectName;

$(document).ready(function() {

txtProjectName = $("#txtProjectName");
divExtendedStaff = $("#divExtendedStaff");

  initializePeoplePicker('divExtendedStaff');

   $("#btnSubmit").click(function () {   
           
    createItemsToList(ExtendedStaffEmails);
});

 });


 function createItemsToList(ExtendedStaffEmails){

       var ppldivExtendedStaff  = $("#divExtendedStaff_TopSpan_HiddenInput");
        inp = ppldivExtendedStaff.attr("value");
        dataExtendedStaff = inp != null && inp != "" ? JSON.parse($("#divExtendedStaff_TopSpan_HiddenInput").attr("value")) : [];

  $.each(dataExtendedStaff, function (rowindex,r){
ExtendedStaffEmails.push(r.EntityData.Email);
             });


  //Get the current client context   
        context = SP.ClientContext.get_current();
        var List = context.get_web().get_lists().getByTitle(listTitle);

        //Create a new record
        var listItemCreationInformation = new SP.ListItemCreationInformation();
        var listItem = List.addItem(listItemCreationInformation);

        //Set the values
        listItem.set_item('ProjectName', txtProjectName.val());     
        listItem.set_item('ExtendedStaff',$.unique(ExtendedStaffEmails).join(";"));

listItem.update();       
        context.load(listItem); 
        context.executeQueryAsync(createItemsToListSucceeded, createItemsToListFailed);

 }

 function createItemsToListSucceeded() { 
       alert('Item created successfully'); 
         
    }

    function createItemsToListFailed(sender, args) {
        alert('Request failed. createItemsToListFailed ' + args.get_message() + '\n' + args.get_stackTrace());
     
    }


function initializePeoplePicker(peoplePickerElementId) {
        // Create a schema to store picker properties, and set the properties.
        var schema = {};
        schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
        //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'] = true;
        schema['MaximumEntitySuggestions'] = 50;
        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);
    }



HTML -


Project Name  <input type="text" id="txtProjectName" />
Extended Staff <div id="divExtendedStaff"></div>

<input type="button" id="btnSubmit" value="Submit"/>