title: Show input field under select option based on click button
body: <p>this code still not working..my requirement is to show input field under select option / dropdown based on click button.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on("click", ".btneditsec1_2", function (e) {
      e.preventDefault();
      var _self = $(this);
      var myacc = _self.data('acc');
      var mywacc = _self.data('wacc');
      var myitc = _self.data('itc');
          $('#id_accreditation').val(myacc);
          $("#id_w_accreditation").val(mywacc);
          $("#id_issue_the_certificate").val(myitc);
      }); 
  
  
    $('select[name=accreditation]').on('change', function() {
      if (this.value == 'Y') {
        $("#accr").show();
      } else {
        $("#accr").hide();
      }
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;
   &lt;/script&gt;
   &lt;br&gt;
  &lt;div align="right" style="margin-right: 30px;"&gt;
    &lt;button id="btneditsec1_2" 
            type="button" 
            class="btn btn-warning btn-sm btneditsec1_2"
            data-acc="Y"
            data-wacc="Accreditation A"
            data-itc="Mr. Jones"&gt;
      &lt;span class="glyphicon glyphicon-tasks"&gt;&lt;/span&gt; Edit Section 1.2&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;label&gt;Has the management / building achieve any accreditation ?&lt;/label&gt;
        &lt;br/&gt;
        &lt;select name="accreditation" id="id_accreditation" class="form-control" title="Please Select"&gt;
          &lt;option selected&gt;&lt;/option&gt;
          &lt;option value="Y"&gt;has achieved&lt;/option&gt;
          &lt;option value="N"&gt;hasn't achieved&lt;/option&gt;
        &lt;/select&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;
        &lt;div id="accr" class="form-group" style="display: none;"&gt;
          &lt;label&gt;What Accreditation :&lt;/label&gt;
          &lt;input type="text" class="form-control input-sm" id="id_w_accreditation" name="w_accreditation"/&gt;&lt;br/&gt;
          &lt;label&gt;Who issue the certificate :&lt;/label&gt;
         &lt;input type="text" class="form-control input-sm" id="id_issue_the_certificate" name="issue_the_certificate" /&gt;&lt;br&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>in there, input text w_accreditation and issue_the_certificate still not showing when click button edit section 1.2
   Help me please..</p>