How to create reference field in UI page dynamically

[Sahil Khan1]

There is UI page when user click on add row button row should be added with 2 new reference field but in my case reference field is available only for 1st row when i click on add row it add row not reference field

this is my HTML code:

<td>
<g:ui_reference
name="u_xyz_field"
label="xyz Field"
table="u_xyz"
query="u_xyz_fieldLIKEfield_name"
class="source-field"
></g:ui_reference>
</td>
<td>
<g:ui_reference
name="incident-field-0"
label="Incident Field"
table="sys_dictionary"
query="nameLIKEincident^ORnameLIKEnumber^ORnameLIKEshort_description"
class="target-field"
></g:ui_reference>
</td>

this is client script for adding 2 new reference field

// Create a new row element
const newRow = document.createElement('tr');

// Add the Source Field cell
const sourceFieldCell = document.createElement('td');
const sourceFieldSelect = document.createElement('g:ui_reference');
sourceFieldSelect.classList.add('source-field');
sourceFieldSelect.setAttribute('name', 'u_xyz_field');
sourceFieldSelect.setAttribute('label', 'xyz Field');
sourceFieldSelect.setAttribute('table', 'u_xyz_call_detail');
sourceFieldSelect.setAttribute('query', 'u_xyz_fieldLIKEfield_name');
sourceFieldCell.appendChild(sourceFieldSelect);
newRow.appendChild(sourceFieldCell);
console.log(sourceFieldCell);

// Add the Target Field cell

const targetFieldCell = document.createElement('td');

const targetFieldSelect = document.createElement('g:ui_reference');
targetFieldSelect.classList.add('target-field');
targetFieldSelect.setAttribute('name', 'element');
targetFieldSelect.setAttribute('label', 'Column name');
targetFieldSelect.setAttribute('table', 'sys_dictionary');
targetFieldSelect.setAttribute('query', 'nameLIKEincident');

targetFieldCell.appendChild(targetFieldSelect);
console.log(targetFieldSelect);
newRow.appendChild(targetFieldCell);

[Ahmmed Ali]

You are adding new element with same name. try adding new element with different name:

sourceFieldSelect.setAttribute('name', 'u_xyz_field1');

targetFieldSelect.setAttribute('name', 'element1');

Name attribute should be unique.

[Sahil Khan1]

not working