title: Showing a hidden div within a cloned div
body: <p>I'm trying to make a form where a dropdown menu can be repeated several times, and which can trigger the display of a form supplement that follows it. </p>
  
  <p>I've got the duplication down thanks to this example: <a href="https://stackoverflow.com/questions/11380045/repeating-div-with-form-fields">Repeating div with form fields</a>, but the duplicated menus aren't triggering the display of the hidden section of the form. I don't have much experience with jquery, so I'm not really sure what I'm doing wrong. Here's a jsfiddle, and the code:</p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/jP8cW/2/" rel="nofollow noreferrer">http://jsfiddle.net/jP8cW/2/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form action="#" method="post"&gt;
      &lt;div class="repeatingSection"&gt;
          &lt;select id="j_id_1" name="j_id_1"&gt;
              &lt;option value="none"&gt;SELECT TITLE&lt;/option&gt;
              &lt;option value="new"&gt;New title&lt;/option&gt;
              &lt;option value="other"&gt;Other titles&lt;/option&gt;
          &lt;/select&gt;
          &lt;div class="hidden"&gt;
              &lt;h3&gt;New Journal Info&lt;/h3&gt;
              &lt;p&gt;
                  &lt;label for="title"&gt;Title: &lt;/label&gt;
                  &lt;input type="text" name="j_title" id="title"/&gt;
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;a href="#" class="addJourn"&gt;Add Journal&lt;/a&gt;
      &lt;p&gt;&lt;input type="submit"/&gt;&lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('.addJourn').click(function(){
      var currentCount =  $('.repeatingSection').length;
      var newCount = currentCount+1;
      var lastRepeatingGroup = $('.repeatingSection').last();
      var newSection = lastRepeatingGroup.clone();
      newSection.insertAfter(lastRepeatingGroup);
      newSection.find("select").each(function (index, select) {
          select.id = select.id.replace("_" + currentCount, "_" + newCount);
          select.name = select.name.replace("_" + currentCount, "_" + newCount);
      });
      newSection.find("label").each(function (index, label) {
          var l = $(label);
          l.attr('for', l.attr('for').replace("_" + currentCount, "_" + newCount));
      });
      return false;
  });
  
  $("select[id^='j_id']").change(function(){
      var selection = this.value; //grab the value selected
      if (selection==="new"){
          $(this).next('.hidden').show()
      } else {
          $(this).next('.hidden').hide()
      }
  });
  </code></pre>
  
  <p>CSS is just <code>.hidden {display: none;}</code></p>
  
  <p>Any advice or insight is very appreciated.</p>