title: DOM manipulation when the value of trigger change
body: <p>What's the best way to do this kind of manipulation case :</p>
  
  <p>When the trigger using the combo box is <strong>change</strong>, I want to change the type of the textField that has previously been added to the form.</p>
  
  <p>My sample <strong>data collection</strong> :</p>
  
  <pre><code>function DataProvide(){
      selectValues = { 
          "choose"        : "-Choose-",
          "id"            : "ID",
          "emp_name"      : "Employee Name",
          "photo_path"    : "Photo Path",
          "emp_id"        : "Employee ID",
          "start_date"    : "Start Date",
          "birth_date"    : "Birth Date"
      };
  
      $.each(selectValues, function(key, value) {   
           $('#data1_1')
               .append($("&lt;option&gt;&lt;/option&gt;")
               .attr("value",key)
               .text(value)); 
      }); 
  }
  
  $(document).ready(function() {
       DataProvide();
  });
  </code></pre>
  
  <p>Data has been displayed in the combobox.</p>
  
  <p>Then I add a field to a form using the <strong>$.append()</strong></p>
  
  <pre><code>var count = 1;
  $(".addCF").click(function(){
      count += 1;
      var $row = $('&lt;tr&gt;' 
      + '&lt;td&gt;' + '&lt;/td&gt;'
      + '&lt;td&gt;' + '&lt;input id="data2_' + count + '" type="text" name="data2[]" class="data2" value="" placeholder=""/&gt;' + '&lt;/td&gt;' 
      + '&lt;td&gt;' + '&lt;input id="data3_' + count + '" type="text" name="data3[]" class="data3" value="" placeholder=""/&gt;' + '&lt;/td&gt;' 
      + '&lt;td&gt;' + '&lt;a href="javascript:void(0);" class="remCF"&gt;Remove&lt;/a&gt;' + '&lt;/td&gt;' 
      + '&lt;/tr&gt;').appendTo("#customFields");
      $row.find('td:first').append($('#data1_1').clone())
  });
  
      $("#customFields").on('click','.remCF',function(){
          $(this).parent().parent().remove();
          count -= 1;
      }); 
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/tTWH4.png" alt="View"></p>
  
  <p>Until this point I've been as successful as I want.</p>
  
  <p>But I want to make a small change to 3rd column. How best way to manipulate this form when <strong>trigger (combo box)</strong> that I select for example "<strong>start_date</strong>" then the field will be changed to use the class "<strong>onlyDate</strong>" that I add jQuery UI to display the date options.</p>
  
  <p>I added :</p>
  
  <pre><code>$(".onlyDate").datepicker({
      dateFormat: "dd-mm-yy"
  });
  </code></pre>
  
  <p>Then to check the value of the <strong>combo</strong>
  $("#customFields").on('change', '.tabelBaru', function() {</p>
  
  <pre><code>if(nilai=='gender'){
              $this.closest("tr").find(".data3").replaceWith(
                  '&lt;select name="data3[]" class="data3"&gt;'
                      + '&lt;option value="man" selected &gt;Man&lt;/option&gt;'
                      + '&lt;option value="woman"&gt;Woman&lt;/option&gt;'
                  + '&lt;/select&gt;'
              )
          }else if(nilai=='start_date'){
              $this.closest("tr").find(".data3").replaceWith(
                  '&lt;input type="text" name="data3[]" value="" class="onlyDate"/&gt;'
              )
          }
  };
  </code></pre>
  
  <p>But jQueryUI datepicker <strong>does not appear</strong> as usual. But if the normal form (without using $.append) all running normally.</p>
  
  <p>How do I fix it?</p>