title: .hide() and .show() in jQuery with strange behaivour
body: <p>I have 3 different blocks of different <code>&lt;section&gt;</code>s.
  You can choose second only after <code>&lt;option&gt;</code> in first block. 
  As well as third, only if <code>&lt;option&gt;</code> from second is chosen.</p>
  
  <p>Changes from first box works ok.
  But in second box everything works only for firs two <code>&lt;section&gt;</code>s in third block.</p>
  
  <p>I'm trying to figure out the reason, since functions for both boxes are very similar and my own debugging haven't bring me the victory yet. </p>
  
  <p><a href="http://jsfiddle.net/A1ex5andr/3Lv1f2a8/" rel="nofollow">http://jsfiddle.net/A1ex5andr/3Lv1f2a8/</a></p>
  
  <pre><code> $(document).ready(function () {
  
      var sel2 = '#sel2';
      var sel3 = '#sel3';
  
      $('#sel1').change(function () {
          var selected = $('#sel1 option:selected').attr('id');
          var target = "#sel2_";
          var sel2New = target + (selected.substr(selected.length-1, 1));
  
          $(sel2New).show();
          $(sel2).hide();
          sel2 = sel2New;
  
      });
  
      $('.sel2').change(function () {
          var selectedMid = $(this).attr('id');
          var target_Middle = (selectedMid.substr(selectedMid.length-1, 1));
          var selected = $(this).find(":selected").attr('id');
          var target = (selected.substr(selected.length-1, 1));
          var sel3New = "#sel3_" + target_Middle + '_' + target ;
  
          $(sel3New).show();
          $(sel3).hide();
          sel3 = sel3New;
      });
  
  });
  </code></pre>