Como imagen de abajo,

Estoy tratando de crear un formulario que contenga menú desplegable (tipo de tarea) + complemento elegido dependiente (nombre de tarea) que el usuario puede agregar o eliminar. El menú desplegable y el dependiente tienen la misma clase para obtener el valor. No puse id para evitar complicidad por los múltiples id. La opción para el menú desplegable del tipo de tarea se agrega usando el siguiente código:

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

Entonces, el problema es que este código también agregará el menú desplegable anterior. He intentado verificar si la opción ya está en el menú desplegable, pero el problema es que detecta el primer menú desplegable, pero no detecta otros menús desplegables. Entonces, el resultado termina siendo que solo el primer menú desplegable tiene una opción, otros no la tienen. Entonces, ¿cómo evitar este duplicado en el menú desplegable?

El siguiente problema es que no sé cómo obtener el valor del tipo de tarea desplegable. Sé cómo obtener todos los menús desplegables de valor. pero no sé cómo obtener el menú desplegable que cambia, para cambiar la opción en el menú desplegable del nombre de la tarea. Si uso la clase, solo detecta el primer tipo de tarea desplegable.