As Image below,

I am trying to create a form that contains dropdown(task type) + dependent chosen plugin (task name) that the user can add or remove. The dropdown and dependent have the same class to get the value. I dint put id to avoid complicity due to the multiple same id. The option for the task type dropdown is added using the code below :

 $.each(task_type, (key, val) => {
      $(".s-type").append(
        $("<option>", {
          value: val.val,
          text: val.text,
        })
      );
  });

So the problem is, this code will append the previous dropdown too. I have tried to check if the option is already in the dropdown, but the problem is, it detects the 1st dropdown, it dint not detect other dropdowns. So the result ends up only 1st dropdown has an option, other don't have. So how to avoid this duplicate in the dropdown.

The next problem is I don't know how to get the value of the dropdown task type. I know how to get all the value dropdowns. but I don't know how to get the drop-down that changes, to change the option in the task name dropdown. If I use the class, it just detects the 1st dropdown task type.