'Hide a field based on populated value from database php [duplicate]

I would like to hide input field based on dropdown value. So two values are auto populated from database stone1 and stone 2 so if stone1 is pupated I want karat to be hidden and if stone 2 then carat and if any more values populated both should be hidden

<label for="form" class="control-label">=Service</label>
<select  id="form1" class="custom-select custom-select-sm select2" >
   <option selected="" disabled>Select services First</option>
   <?php
      ?>
   <!-- <option value="<?php echo $row['id'] ?>" ><?php echo $name ?></option> -->
   <?php endwhile; ?>
   <div class="col-md-2">
      <div class="form-group ctd" data-cid="ctd">
         <label for="ctd">stone1</label>
<select class="form-control" id="ctd" name="ctd">
<option>24</option>
<option>22</option>
<option>20</option>
<option>18</option>
<option>16</option>
<option>14</option>
</select>
</div>  
</div> 
<div class="col-md-2">
   <div class="form-group ctg" data-cid="ctg">
      <label for="ctg">stone2</label>
      <select class="form-control" id="ctg" name="ctg">
         <option>24</option>
         <option>22</option>
         <option>20</option>
         <option>18</option>
         <option>16</option>
         <option>14</option>
      </select>
   </div>
</div>

So two values are auto-populated from database stone1 and stone 2 so if stone1 is populated I want karat to be hidden and if stone 2 then carat and if any more values populated both should be hidden

I tried this code but it hides only one and does not work at all

<script>    
  var form1 = jQuery('#form1');
  var select = this.value;
  form_id.change(function () {
    if ($(this).val() == 'stone1') {
      $('.ctd').show();             
    } else {
      $('.ctg').hide(); 
    }               
  });       
           
</script>


Solution 1:[1]

     (function ($) {
 
     $(function () {
        var form1 = jQuery('#form1');
   var select = this.value;
         $('#form1').change(function(){
             if( $(this).val()==="1" ){
                 $("#ctd").show()
                $("#ctg").hide()
                $('label[for="ctg"]').hide();
                $('label[for="ctd"]').show();
             } else {
                $("#ctg").show()
                 $("#ctd").hide()
                $('label[for="ctd"]').hide();
                $('label[for="ctg"]').show();
             }
         });
 
 
         $('#form1').trigger("change");
     });
 
 }(jQuery));

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Amit kumar