[FIXED] How to auto check radio button basis of two radio button groups

Issue

 <div class="product_colors">     
        <span class="header" style="display:block;">Color</span>              
                             
          <label class="color_label active">   
          <input type="radio" name="product_color" value="gold" >Gold                           
          <span style="""></span>                  
          </label>
                         
          <label class="color_label">   
          <input type="radio" name="product_color" value="rose gold">Rose Gold                         
          <span style="" data-title="rose gold"></span>                  
          </label>
                        
          <label class="color_label">   
          <input type="radio" name="product_color" value="silver" > Silver                            
          <span style="" data-title="silver"></span>                  
          </label>                           
      </div>

      <div class="product_stones">
        <span class="header" style="display:block;">Stone</span>
           
        <label class="stone_label">
          <input type="radio" name="product_stone" value="malachite" >malachite         
        </label>          

        <label class="stone_label active">
          <input type="radio" name="product_stone" value="tiger-eye" > tiger-eye        
        </label>
          
        <label class="stone_label">
          <input type="radio" name="product_stone" value="black" > black           
        </label>

        <label class="stone_label">
          <input type="radio" name="product_stone" value="blue" > blue         
        </label>
          
      </div>

      <div class="combination">
          Combination
        <div class="hidden">             
            <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite        
            <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye         
            <input type="radio" name="combination"  class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black          
             <input type="radio" name="combination"  class="hidden_wrap" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue             
          
          </div>
      </div>

here is my output image
I want to change combination radio button value to be select automatically on the basis of selected color and stone. Can someone help me to get rid of this problem.
Here is my code I've tried everything but I am new in JS so I can't find solution of this problem

Color Gold Rose Gold Silver

  <div class="product_stones">
    <span class="header" style="display:block;">Stone</span>
       
    <label class="stone_label">
      <input type="radio" name="product_stone" value="malachite" >malachite         
    </label>          

    <label class="stone_label active">
      <input type="radio" name="product_stone" value="tiger-eye" > tiger-eye        
    </label>
      
    <label class="stone_label">
      <input type="radio" name="product_stone" value="black" > black           
    </label>

    <label class="stone_label">
      <input type="radio" name="product_stone" value="blue" > blue         
    </label>
      
  </div>

  <div class="combination">
      Combination
    <div class="hidden">             
        <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite        
        <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye         
        <input type="radio" name="combination"  class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black          
         <input type="radio" name="combination"  class="hidden_wrap" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue             
      
      </div>
  </div>

Solution

Here is another solution I've tried which is not edit HTML. My solution is going to find combination radio button that has proper data-color and data-stone

$("input[name^='product_']").on('change', (e) => {
  $("input[name='combination']").prop('checked', false);
  var productColor = $("input[name='product_color']:checked").val();
  var productStone = $("input[name='product_stone']:checked").val();

  if (productColor !== undefined && productStone !== undefined) {
    if ($(`input[data-color='${productColor}'][data-stone='${productStone}']`).length) {
      $(`input[data-color='${productColor}'][data-stone='${productStone}']`).trigger('click');
    }

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product_colors">
  <span class="header" style="display:block;">Color</span>

  <label class="color_label active">   
          <input type="radio" name="product_color" value="gold" >Gold                           
          <span style="""></span>                  
          </label>

  <label class="color_label">   
          <input type="radio" name="product_color" value="rose gold">Rose Gold                         
          <span style="" data-title="rose gold"></span>                  
          </label>

  <label class="color_label">   
          <input type="radio" name="product_color" value="silver" > Silver                            
          <span style="" data-title="silver"></span>                  
          </label>
</div>

<div class="product_stones">
  <span class="header" style="display:block;">Stone</span>

  <label class="stone_label">
          <input type="radio" name="product_stone" value="malachite" >malachite         
        </label>

  <label class="stone_label active">
          <input type="radio" name="product_stone" value="tiger-eye" > tiger-eye        
        </label>

  <label class="stone_label">
          <input type="radio" name="product_stone" value="black" > black           
        </label>

  <label class="stone_label">
          <input type="radio" name="product_stone" value="blue" > blue         
        </label>

</div>

<div class="combination">
  Combination
  <div class="hidden">
    <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
    <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
    <input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
    <input type="radio" name="combination" class="hidden_wrap" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue

  </div>
</div>

Answered By - NekoMi

Answer Checked By - Candace Johnson (PHPFixing Volunteer)