Tengo dos campos diferentes, (imagen de abajo) los divs tienen la misma y diferente clase css, necesito seleccionar solo uno, en lugar de uno en cada campo. al seleccionar un campo, el otro está deshabilitado.
código:
<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