Problem with a Javascript button

Question

I’m in need of a help, I’m trying to make a comment program automatically, however I arrived in a empasse, I have 2 buttons inside the site and I always end up picking the first

function onSendComment(arrobaList) {
const inputComment = document.querySelector('form.X7cDz > textarea');
const publishButton = document.querySelector('form.X7cDz > button')

let html = '';

for (const arroba of arrobaList) {
 html += `${arroba} `;
}

inputComment.value = '';
inputComment.value = html;
inputComment.dispatchEvent(new Event("input", { bubbles: true }));

publishButton.removeAttribute("disabled");
publishButton.click();

The first button that is giving work is like this, in the CSS code

<button class="wpO6b " type="button"><div class="QBdPU "><svg aria-label="Emoji" class="_8-yf5 " fill="#262626" height="24" viewBox="0 0 48 48" width="24"><path d="M24 48C10.8 48 0 37.2 0 24S10.8 0 24 0s24 10.8 24 24-10.8 24-24 24zm0-45C12.4 3 3 12.4 3 24s9.4 21 21 21 21-9.4 21-21S35.6 3 24 3z"></path><path d="M34.9 24c0-1.4-1.1-2.5-2.5-2.5s-2.5 1.1-2.5 2.5 1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5zm-21.8 0c0-1.4 1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5-2.5-1.1-2.5-2.5zM24 37.3c-5.2 0-8-3.5-8.2-3.7-.5-.6-.4-1.6.2-2.1.6-.5 1.6-.4 2.1.2.1.1 2.1 2.5 5.8 2.5 3.7 0 5.8-2.5 5.8-2.5.5-.6 1.5-.7 2.1-.2.6.5.7 1.5.2 2.1 0 .2-2.8 3.7-8 3.7z"></path></svg></div></button>

What I need is like this, in the CSS code

<button class="sqdOP yWX7d y3zKF " disabled="" type="submit">Publicar</button>

would like to know if I have any option to select the specific.

Thanks in advance

Answer 1

Since I can’t see your HTML I’ll make a suggestion with what we have..

Instead of attacking directly in this way, select all and make a subset through the array that will be generated using the queryselectorall.

const inputComment = document.querySelectorAll('form.X7cDz');

console.log(inputComment[0])
console.log(inputComment[1])
....

Good luck.