title: Show/Hide input field inside appended element
body: <p>I have the following JS/jQuery code to append rows to an existing table. Upon appending, I want to show the input field only when "select" or "radio" is selected as the option type. </p>
  
  <p>When I add multiple rows, the input field appearance/disappearance is dependent upon the first added row. I want it to show/hide only on the row(s) where any of the two options are selected.</p>
  
  <p>Hope that made sense. Any suggestion would be helpful. Thanks!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table id="tbl-formfields" class="table vertical-align table-condensed" &gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Input Type&lt;/th&gt;
              &lt;th&gt;Make Required&lt;/th&gt;
              &lt;th&gt;Action&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="tbody"&gt;
          &lt;tr id="tr-formField"&gt;
              &lt;td&gt;
                  &lt;div&gt;
                      &lt;select name="formOptionType[]" id="formOptionType"&gt;
                          &lt;option value=""&gt;-------------------------------------&lt;/option&gt;
                          &lt;option value="text"&gt;Text&lt;/option&gt;
                          &lt;option value="textarea"&gt;Textarea&lt;/option&gt;
                          &lt;option value="select"&gt;Select Options (Dropdown)&lt;/option&gt;
                          &lt;option value="radio"&gt;Radio Buttons&lt;/option&gt;
                          &lt;option value="checkbox"&gt;Checkbox&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div id="block-optionsInput" style="display:none"&gt;
                      &lt;label&gt;Options:&lt;/label&gt;&lt;br&gt;
                      &lt;input id="options" type="text" name="fieldOptions[]" data-role="tagsinput"/&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;label&gt;&lt;input type="checkbox" name="fieldRequired[]"/&gt; Required&lt;/label&gt;
              &lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>    //****Repeat form field block****
      var repeatBlock = "#tbody";
      var repeatText = '&lt;tr class="trRepeat"&gt;\n\
          &lt;td&gt;\n\
              &lt;select class="optType" name="formOptionType[]"&gt;\n\
                  &lt;option value=""&gt;-------------------------------------&lt;/option&gt;\n\
                  &lt;option value="text"&gt;Text&lt;/option&gt;\n\
                  &lt;option value="textarea"&gt;Textarea&lt;/option&gt;\n\
                  &lt;option value="select"&gt;Select Options (Dropdown)&lt;/option&gt;\n\
                  &lt;option value="radio"&gt;Radio Buttons&lt;/option&gt;\n\
                  &lt;option value="checkbox"&gt;Checkbox&lt;/option&gt;\n\
              &lt;/select&gt;\n\
              &lt;div class="optBlock" style="display:none"&gt;\n\
                  &lt;label&gt;Options:&lt;/label&gt;&lt;br&gt;\n\
                  &lt;input class="optInput" type="text" name="fieldOptions[]" data-role="tagsinput"/&gt;\n\
              &lt;/div&gt;\n\
          &lt;/td&gt;\n\
          &lt;td&gt;&lt;label&gt;&lt;input type="checkbox" name="fieldRequired[]"/&gt; Required&lt;/label&gt;&lt;/td&gt;\n\
          &lt;td&gt;&lt;a href="javascript:void(0)" class="removeField" style="color:red" title="Remove this field"&gt;\n\
              &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/a&gt;\n\
          &lt;/td&gt;&lt;/tr&gt;';
  
      $("#btn-addfield").click(function (e) {
          e.preventDefault();
          $(repeatBlock).append(repeatText);
      });
      $(repeatBlock).on('click', '.removeField', function (e) {
          e.preventDefault();
          $(this).parent().parent().remove();
      });
  
      //****Show input field when dropdown/radio is selected****
      $(repeatBlock).on('change', $(".optType").val(), function (e) {
          e.preventDefault();
          if ($(this).find(".optType").val() === "radio" || $(this).find(".optType").val() === "select") {
              $(this).find(".optBlock").show();
              $(".optInput").tagsinput('refresh');
          } else {
              $(this).find(".optBlock").hide();
          }
      });
  </code></pre>