Error if more than 1 form is on the page?

[1990eam]

Hello. I have an index of Suggestions where I need users (project collaborators) to be able to vote directly (so no exclusive view for each new vote form).

Since there is more than one form (one for each suggestion) I'm getting the following error:

_[DOM] Found 2 elements with non-unique id #suggestion_vote_rating:_

Is there a way to make this plugin work this way?

I've tried isolating each card where the form is included and calling form.barrating inside each card, but I get a "barrating is not a function" error.

I've tried addapting the function like this, following advice on other issues to no success:

EDIT: I managed to make it work like this:

const initStarRating = () => {
  document.querySelectorAll(".suggestion-card").forEach((el) => {
    const target = el.dataset.target
    $(`#target_${target}`).barrating({
      theme: 'css-stars',
      onSelect: (value, text, event) => {
      const form = $(`form.vote-form.form-target${target}`);
      form.submit();
    }
  });
  })
};

This is the function I was using and that works if only one form is present:

const initStarRating = () => {

  $('#suggestion_vote_rating').barrating({
    theme: 'css-stars',
    onSelect: (value, text, event) => {
      const form = $("form.vote-form");
      form.submit();
    }
  });
};