title: How to toggle input fields based on dropdown menu with multiple selection
body: <p>I have a dropdown menu made by  with multiple selection feature.
  I also have some form inputs fields containing some divs, label and input tags.
  I want to show a particular form field on selection of that particular item in select menu.</p>
  
  <p>Lets say, I have</p>
  
  <pre><code>    &lt;div class="col-md-6 col-12"&gt;
      &lt;div class="form-group"&gt;
          &lt;label&gt;Identity Proofs&lt;/label&gt;
          &lt;select class="form-control select2" multiple="multiple" data-placeholder="Select at least one valid Identity Proof"
                              style="width: 100%;" id="idproof"&gt;
              &lt;option value="aadhar"&gt;Aadhar Card&lt;/option&gt;    
              &lt;option value="passport"&gt;Indian Passport&lt;/option&gt;    
              &lt;option value="voter-ID"&gt;Voter ID Card&lt;/option&gt;    
              &lt;option value="pan"&gt;PAN Card&lt;/option&gt;    
              &lt;option value="dl"&gt;Driving License&lt;/option&gt;    
              &lt;option value="ration"&gt;Ration Card&lt;/option&gt;    
              &lt;option value="birth"&gt;Birth Certificate&lt;/option&gt;    
              &lt;option value="scst"&gt;Backward classes Certificate&lt;/option&gt;    
              &lt;option value="udid"&gt;Unique Disability ID (UDID) Card&lt;/option&gt;    
              &lt;option value="army"&gt;Army License&lt;/option&gt;
              &lt;option value="others"&gt;Others&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am able to select multiples values from the above menu.</p>
  
  <p>Then I have 11  or  fields which I want to toggle the visiblity.</p>
  
  <p>When I select "aadhar", the div with id="id1" should be visible.
  similarly,
  When I select "passport", the div with id="id2" should be visible.
  similarly,
  When I select both "voter-ID" and "pan", the div with id="id3" and id="id4" should be visible.</p>
  
  <p>I have already tried many if else and else if statements with jQuery's hide() and show() function. Every method works fine for SINGLE SELECTION but not for multiple selections. I am very frustrated by this issue.</p>
  
  <p>Then i tried FOR loop (I dont know js or jQuery much). But still it does not helps. Below is the code</p>
  
  <pre><code>$("#idproof").on('change',function(){
      var arrayid = ["id1","id2","id3","id4","id5","id6","id7","id8","id9","id10","id11"];
      var arrayname = ["aadhar","passport","voter-ID","pan","dl","ration","birth","scst","udid","army","others"];
      var i,j;
      for (j = 0; j &lt;= 10; j++) {
  if($("#idproof").val()=="arrayname[i]"){
      $("#arrayid[i]").hide();
  }
      }
      for (i = 0; i &lt;= 10; i++) {
  if($("#idproof").val()=="arrayname[i]"){
      $("#arrayid[i]").show();
  }
      }
  
  });
  </code></pre>
  
  <p>I even tweaked the syntax(thinking it is wrong) but it did not helped. I even tried "display:none" in the divs and then changing it through jQuery but still no hope.</p>
  
  <p>my last attempt was:</p>
  
  <pre><code>$("#idproof").on('change',function(){
      $("#id1","#id2","#id3","#id4","#id5","#id6","#id7","#id8","#id9","#id10","#id11").hide()
      if( !($("#idproof").val()=="aadhar")){
      $("#id1").hide()
      }
      else{
              $("#id1").show()
          }
      if( !($("#idproof").val()=="passport")){
      $("#id2").hide()
      }
       else{
              $("#id2").show()
          }
      if( !($("#idproof").val()=="voter-ID")){
      $("#id3").hide()
      }
       else{
              $("#id3").show()
          }
      if( !($("#idproof").val()=="pan")){
      $("#id4").hide()
      }
       else{
              $("#id4").show()
          }
      if( !($("#idproof").val()=="dl")){
      $("#id5").hide()
      }
       else{
              $("#id5").show()
          }
      if( !($("#idproof").val()=="ration")){
      $("#id6").hide()
      }
       else{
              $("#id6").show()
          }
      if( !($("#idproof").val()=="birth")){
      $("#id7").hide()
      }
       else{
              $("#id7").show()
          }
      if( !($("#idproof").val()=="scst")){
      $("#id8").hide()
      }
       else{
              $("#id8").show()
          }
      if( !($("#idproof").val()=="udid")){
      $("#id9").hide()
      }
       else{
              $("#id9").show()
          }
      if( !($("#idproof").val()=="army")){
      $("#id10").hide()
      }
       else{
              $("#id10").show()
          }
      if( !($("#idproof").val()=="others")){
      $("#id11").hide()
      }
       else{
              $("#id11").show()
          }
  });
  </code></pre>
  
  <p>The below code works for single selection(but still buggy)</p>
  
  <pre><code>$("#idproof").on('change',function(){ $("#id1","#id2","#id3","#id4","#id5","#id6","#id7","#id8","#id9","#id10","#id11").hide() if( !($("#idproof").val()=="aadhar")){ $("#id1").hide() } else{ $("#id1").show() } if( !($("#idproof").val()=="passport")){ $("#id2").hide() } else{ $("#id2").show() } if( !($("#idproof").val()=="voter-ID")){ $("#id3").hide() } else{ $("#id3").show() } if( !($("#idproof").val()=="pan")){ $("#id4").hide() } else{ $("#id4").show() } if( !($("#idproof").val()=="dl")){ $("#id5").hide() } else{ $("#id5").show() } if( !($("#idproof").val()=="ration")){ $("#id6").hide() } else{ $("#id6").show() } if( !($("#idproof").val()=="birth")){ $("#id7").hide() } else{ $("#id7").show() } if( !($("#idproof").val()=="scst")){ $("#id8").hide() } else{ $("#id8").show() } if( !($("#idproof").val()=="udid")){ $("#id9").hide() } else{ $("#id9").show() } if( !($("#idproof").val()=="army")){ $("#id10").hide() } else{ $("#id10").show() } if( !($("#idproof").val()=="others")){ $("#id11").hide() } else{ $("#id11").show() } });
  </code></pre>