Create a picker dynamically when button is clicked.

When I click on the + button, a new row should get created, creating a new row is also working fine with the below code.

in the JSP page, I first created a table like below

<table id="attachmentTable" style="border-collapse: separate; border-spacing: 12px; font-family: Arial, Helvetica, sans-serif;">
	<!-- pickerCallback="BUEPMDocumentPickerCallBack" -->
	<tbody id="rows">
		<tr>
			<td>
				<wctags:itemPicker 
					id="buObjectPicker" 
					label="Document Picker"
					showTypePicker="false" 
					objectType="WCTYPE|wt.epm.EPMDocument,WCTYPE|wt.doc.WTDocument" 
					componentId="buObjectPicker"
					pickerTitle="Object Picker" 
					displayAttribute="name,number"
					pickedAttributes="name,number,version,iteration,view"
					editable="true" 
					pickerCallback="BUEPMDocumentPickerCallBack"
					pickerTextBoxLength = "40"
					readOnlyPickerTextBox="true"
				/>
			</td>
			<td style="border-collapse: separate; border-spacing: 12px; font-family: Arial, Helvetica, sans-serif;">
				<select style="width:190px;" name="linkType" id = "linkType" >
					<option value="" disabled selected>(Please Select Document)</option>
				</select>
			</td>
			<td style="border-collapse: separate; border-spacing: 12px; font-family: Arial, Helvetica, sans-serif;"><button type="button" id="add-NE"><img src="netmarkets/images/add16x16.gif"></button></td>
			<td style="border-collapse: separate; border-spacing: 12px; font-family: Arial, Helvetica, sans-serif;"><button type="button" id="delete-NE"><img src="netmarkets/images/remove16x16.gif"></button></td>
		</tr>
		
		<!-- dynamically rows will get added here -->
	</tbody>
</table>

in the callback function, everytime Im getting console.log(pickerID); as buObjectPicker whenever I click on the picker.

Written the javascript as mentioned below whenever we click on add button and remove button.

<script>

jQuery(function() {
	 let attachmentIndex = 0;

	 const jQueryrows = jQuery("#rows");
	 const jQuerytable = jQuery("#attachmentTable");
	 const jQueryfirstRow = jQuerytable.find("tbody tr").first();
	 
	 console.log({jQueryfirstRow});

	 const templateRowHtml = jQueryfirstRow.prop("outerHTML");

	 jQuery("#attachmentTable").on("click", ".add-NE-clone, #add-NE", function(e) {
	 e.preventDefault();
	 addRow();
	 });

	 function addRow() {
	 attachmentIndex++;
	 const jQuerynewRow = jQuery(templateRowHtml);
	 const jQuerypicker = jQuerynewRow.find("#buObjectPicker");
	 console.log({jQuerypicker});
	 const pickerId = "buObjectPicker-" + attachmentIndex;
	 console.log({pickerId});
	 jQuerypicker.attr("id", pickerId).attr("componentId", pickerId).attr("name", pickerId);
	 jQueryrows.append({jQuerynewRow});
	 console.log({jQueryrows});
	 }

	 jQuery("#attachmentTable").on("click", ".delete-NE", function(e) {
	 e.preventDefault();
	 const jQueryrow = jQuery(this).closest("tr");
	 const totalRows = jQuery("#attachmentTable tbody tr").length;
	 if (totalRows > 1) {
	 jQueryrow.remove();
	 } else {
	 jQueryrow.find("input[type='text']").val("");
	 const jQueryselect = jQueryrow.find('select[name="linkType"]');
	 jQueryselect.empty().append('<option value="" disabled selected>(Please Select Document)</option>');
	 }
	 });

	 function reinitPicker(cfg) {
	 console.log("Init picker with names:", cfg);
	 }
	});


</script>

@HelesicPetr 

Please let me know if there is anything I miss over here.