动态创建输入文本 ID，并在 JavaScript 中获取它并在 UI 中加载值

osapi.XXXX.XXXXXX.people.get({id: userID}).execute(function (person) {
        var profile = person.jive.profile;
        var profileName = person.name;
        var profilePhNumber = person.phoneNumbers;
        profile.forEach(function (obj) {
            if (obj.jive_label === 'Department') {
                console.log('department value is: ' + obj.value);
                document.getElementById("getDepartmentValue").value = obj.value;
            }
            if (obj.jive_label === 'Office') {
                console.log('Office location is: ' + obj.value);
                document.getElementById("getLocationValue").value = obj.value;
            }
            if (obj.jive_label === 'Languages') {
                console.log('Languages known are: ' + JSON.stringify(obj.values));
                document.getElementById("getLanguagesValue").value = JSON.stringify(obj.values);
            }
        });
        for(var profileFormatName in profileName){
            if(profileFormatName === 'formatted'){
                console.log('profile name: ' +profileName[profileFormatName]);
                document.getElementById("getPersonNameValue").value = profileName[profileFormatName];
            }
        }
        profilePhNumber.forEach(function (obj) {
            if (obj.jive_label === 'Phone Number') {
                console.log('Phone number is: ' + obj.value);
                document.getElementById("getPhoneNumberValue").value = obj.value;
            }
        });
    });

  <button id="target_people_picker" class="btn btn-primary" autofocus>getUser</button>
                    <table border="1">
                        <tr>
                            <td>Name:</td> <td><input type="text" id="getPersonNameValue" value=""  /></td>
                        </tr>
                        <tr>
                            <td>Department:</td> <td><input type="text" id="getDepartmentValue" value=""  /></td>
                        </tr>
                        <tr>
                            <td>Location:</td> <td><input type="text" id="getLocationValue" value=""  /></td>
                        </tr>
                        <tr>
                            <td>Phone Number:</td> <td><input type="text" id="getPhoneNumberValue" value=""  /></td>
                        </tr>
                        <tr>
                            <td>Languages:</td> <td><input type="text" id="getLanguagesValue" value=""  /></td>
                        </tr>
                    </table>

以上是我的JS和HTMl代码片段。

如果只有一个用户 ID 在上述情况下像 100 一样传递，则上面的代码有效。如果我想在有 10 个用户的情况下迭代相同的代码片段，那么我必须确保创建一个新的动态输入文本字段，并通过 document.getElement 将它们的 ID 传递给 javascript，以便 JS 可以将值发送到 UI。
我如何确保所有 10/20/40 用户运行相同的代码片段，但它应该创建新字段

例：-