Not Clicking on list item with JS

Hey,

Im want to click on list element that visible after typing utt but when i do with javascript its not clicking just typing utt one by one

but when i do with without js its working fine but only for 1 block there is multiple and i wanted for multiple not just for one:

My code with JS version:

{
  "Name": "UK GOVT",
  "CreationDate": "2024-12-6",
  "Commands": [
    {
      "Command": "executeScript",
      "Target": "var fields = document.querySelectorAll(\"input[placeholder='--- Select Other Entity ---']\"); function processFields(index) { if (index < fields.length) { var field = fields[index]; field.click(); setTimeout(function() { field.value = 'utt'; field.dispatchEvent(new Event('input', {bubbles: true})); setTimeout(function() { var dropdownItem = document.querySelector('.select2-results__option.select2-results__option--highlighted'); if (dropdownItem) { dropdownItem.click(); setTimeout(function() { processFields(index + 1); }, 500); } }, 500); }, 200); } } processFields(0);",
      "Value": "",
      "Description": "Clicks fields, types 'utt', selects Uttarakhand Government from dropdown"
    }
  ]
}

Code without JS just for single field:

{  
  "Name": "UK GOVT",  
  "CreationDate": "2024-12-6",  
  "Commands": [  
    {  
      "Command": "store",  
      "Target": "--- Select Other Entity ---",  
      "Value": "placeholder"  
    },  
    {  
      "Command": "click",  
      "Target": "css=input[placeholder='${placeholder}']",  
      "Value": ""  
    },  
    {  
      "Command": "pause",  
      "Target": "500",  
      "Value": ""  
    },  
    {  
      "Command": "type",  
      "Target": "css=input[placeholder='${placeholder}']",  
      "Value": "utt"  
    },  
    {  
      "Command": "pause",  
      "Target": "1000",  
      "Value": ""  
    },  
    {  
      "Command": "click",  
      "Target": "css=.select2-results__option.select2-results__option--highlighted",  
      "Value": ""  
    }  
  ]  
}  

Can you try with XClick and XType?

Hello thanks for the response:

i tried with simple approach but its just doing for 1 table only i wanted for all like my above script do:

my simple script that works for 1 table only:

{
  "Name": "UK type utt",
  "CreationDate": "2024-12-16",
  "Commands": [
    {
      "Command": "store",
      "Target": "3", 
      "Value": "tableCount", 
      "Description": "Store the number of tables to loop through"
    },
    {
      "Command": "times",
      "Target": "${tableCount}",
      "Value": "",
      "Description": "Loop through each table a fixed number of times"
    },
    {
      "Command": "waitForElementPresent",
      "Target": "//*[@id=\"articleContent\"]/div/div/div[6]/div[2]/span/span/span/ul/li/input",
      "Value": "5000",
      "Description": "Wait for the input field to be present (5 seconds)."
    },
    {
      "Command": "XClick",
      "Target": "//*[@id=\"articleContent\"]/div/div/div[6]/div[2]/span/span/span/ul/li/input",
      "Value": "",
      "Description": "Click the 'Select Other Entity' input field in the current table."
    },
    {
      "Command": "type",
      "Target": "//*[@id=\"articleContent\"]/div/div/div[6]/div[2]/span/span/span/ul/li/input",
      "Value": "utt",
      "Description": "Type 'utt' into the 'Select Other Entity' input field in the current table."
    },
    {
      "Command": "pause",
      "Target": "1000",
      "Value": "",
      "Description": "Wait for the dropdown list to appear (1 second)."
    },
    {
      "Command": "XType",
      "Target": "${KEY_ENTER}",
      "Value": "",
      "Description": "Press Enter to select the result in the current table."
    },
    {
      "Command": "end",
      "Target": "",
      "Value": "",
      "Description": "End of loop for the current table."
    }
  ]
}

its looping on 1st first table only:

my table html elements:

<tr class="dark" style="max-height:50px;overflow-y:scroll;">
            <td>
               1            </td>
            <td>
               Article No:25900863               <br>
               <br>
               16 Dec 2024                           </td>
            <td colspan="3" style="width:30%;">
               <table style="width:100% !important;">
                  <tbody><tr></tr>
                  <tr style="border-bottom: none;">
                     <td colspan="3">
1 is table number with spaces in it