I do have this script, which should hide/display DIVs based on selected option. It works great.

But I need to disable another DIVs (SELECTS, etc.) which are not currently choose based on the main select TYPE. The reason is I do have the same name for SELECT in every hidden DIV (possibility1); so when I choose in the first main select TYPE = 1 (and click to SEND button), it transfers values from TYPE = 2 (option value X, instead of eg. option value A).

Could you please help me? Thanks!

<form action="#" method="post" id="text">
  <select name="type" id="type">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
      
  
  <script>
     $(function() {$('#type').change(function(){ $('.possibility').hide(); $('#' + $(this).val()).show(); }); });                                        
      </script>
  
   <!-- IF TYPE = 1 -->                                
  <div id="1" class="possibility" style="<?php if($_POST[type]=="1" || $_POST[type]==""){echo 'display:block;';} else {echo 'display:none;';} ?>">
        <select name="possibility1" id="possibility1">
          <option value="A">A</option>
          <option value="B">B</option>
        </select>    
  </div>
  
  <!-- IF TYPE = 2 -->
  <div id="2" class="possibility" style="<?php if($_POST[type]=="2"){echo 'display:block;';} else {echo 'display:none;';} ?>">
        <select name="possibility1" id="possibility1">
          <option value="X">X</option>
          <option value="Y">Y</option>
        </select>                                          
  </div> 
  
  <input type="submit" name="send" value="send" class="button">
</form>

<?php
    if(isset($_POST['send'])) {  
    echo  $_POST[possibility1]; 
}
?>

I tried to add to script this code, but it doesn't work.

 $(function() {
  $('#type').change(function(){ 
    $('.possibility *').prop('disabled', true); 
    $('#' + $(this).val()+' *').prop('disabled', false); 
  });
});