I have two different fields, (image below) the divs have the same and different css class, I need to select only one, instead of one in each field. when selecting one field, the other is disabled.
code:
<div class="wc-pao-addon-container wc-pao-addon wc-pao-addon-PRODUTO" data-product-name="PRODUTO">
<label for="addon-24177-PRODUTO" class="wc-pao-addon-name" data-addon-name="TIPO" data-has-per-person-pricing="" data-has-per-block-pricing="">PRODUTO<span class="wc-pao-addon-image-swatch-price">TIPO 1</span></label>
<p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-24177-TIPO-1">
<a href="#" class="wc-pao-addon-image-swatch" data-value="TIPO 1" data-price="<span class="wc-pao-addon-image-swatch-price">TIPO 1 </span>">
<img src="image.jpg">
</a>
<select class="wc-pao-addon-image-swatch-select wc-pao-addon-field" name="addon-24177-PRODUTO">
<option value=""></option>
<option data-raw-price="" data-price="" data-price-type="flat_fee" value="TIPO 1" data-label="TIPO 1">TIPO 1</option>
</select>
</p>
</div>
Field 2:
<div class="wc-pao-addon-container wc-pao-addon wc-pao-addon-PRODUTO 2" data-product-name="PRODUTO 2">
<label for="addon-24177-PRODUTO 2" class="wc-pao-addon-name" data-addon-name="TIPO2" data-has-per-person-pricing="" data-has-per-block-pricing="">PRODUTO 2<span class="wc-pao-addon-image-swatch-price">TIPO2</span></label>
<p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-24177-TIPO-1">
<a href="#" class="wc-pao-addon-image-swatch" data-value="TIPO2" data-price="<span class="wc-pao-addon-image-swatch-price">TIPO2 </span>">
<img src="image.jpg">
</a>
<select class="wc-pao-addon-image-swatch-select wc-pao-addon-field" name="addon-24177-PRODUTO 2">
<option value=""></option>
<option data-raw-price="" data-price="" data-price-type="flat_fee" value="TIPO2" data-label="TIPO2">TIPO2</option>
</select>
</p>
</div>```
[enter image description here][1]
[1]: https://i.stack.imgur.com/GuigG.png