title: Get textbox value from dynamically created table
body: <p>I've got a table where I use Ajax to get the data from the database. After each line i've got a number of textboxes. I need the data from each line from the database and the data that is filled in manually in the textboxes. I can't get the data from the textboxes. I keep getting undefined, or an empty result. I've tried it with id's and classes, but without result. Can somebody tell me what i'm doing wrong?</p>
  
  <p>This a what the table looks like</p>
  
  <p><a href="https://www.dropbox.com/s/wvnjkgsx6k1k4es/PastedGraphic-1.png?dl=0" rel="nofollow noreferrer">https://www.dropbox.com/s/wvnjkgsx6k1k4es/PastedGraphic-1.png?dl=0</a></p>
  
  <p>And this is part of my code</p>
  
  <pre><code>function opslaan() {
      $('#tabelddl tbody tr').each(function() {
          var cijfer1 = $(this).find(".vraag1").val();
      });
  }
  </code></pre>
  
  <p>Here is the Ajax call</p>
  
  <pre><code>   $.ajax({
         url:"../php/zoek_opleiding_cijfer.php",
         type:"POST",
          async: false,
         data :
         {
             'opleidingid' : opleidingid
         },
         success: function(data) {
             var trHTML = '';
             $("#tabelddl tbody").remove();
             $.each(data,function(i,item) {
                 trHTML += '&lt;tr&gt;&lt;td style="display:none;"&gt;' + data[i].opleiding_id +  
                   '&lt;/td&gt;&lt;td style="display:none;"&gt;' + data[i].id +  
                   '&lt;/td&gt;&lt;td style="display:none;"&gt;' + data[i].inschrijving_id +  
                   '&lt;/td&gt;&lt;td style="display:none;"&gt;' + data[i].naam_opleiding +  
                   '&lt;/td&gt;&lt;td&gt;' + data[i].achternaam + '&lt;/td&gt;&lt;td&gt;' +  
                    data[i].tussenvoegsel + '&lt;/td&gt;&lt;td&gt;' + data[i].voornaam +  
                   '&lt;/td&gt; &lt;td class= "vraag1" id="vraag1" style="display:none;"&gt;' +  
                   '&lt;input type="text"&gt;&lt;/td&gt; &lt;/td&gt;' + 
                   '&lt;/td&gt; &lt;td class= "vraag2" id="vraag2" style="display:none;"&gt;' +  
                   '&lt;input type="textbox"&gt;&lt;/td&gt; &lt;/td&gt;' + 
                   '&lt;/td&gt; &lt;td class= "vraag3" id="vraag3" style="display:none;"&gt;' +  
                   '&lt;input type="textbox"&gt;&lt;/td&gt; &lt;/td&gt;' + 
                   '&lt;/td&gt; &lt;td class= "vraag4" id="vraag4" style="display:none;"&gt;' +  
                   '&lt;input type="textbox"&gt;&lt;/td&gt; &lt;/td&gt;' +  
                   '&lt;/td&gt; &lt;td class= "vraag5" id="vraag5" style="display:none;"&gt;' +  
                   '&lt;input type="textbox"&gt;&lt;/td&gt; &lt;/tr&gt;';
             });
         $('#tabelddl').append(trHTML);
         },
  
         complete: function(){
         }
     });
  </code></pre>
  
  <p>And here is the table</p>
  
  <pre><code>&lt;table class="table" id="tabelddl"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th class="col-lg-1" style="display:none;"&gt;opleiding_id&lt;/th&gt;
        &lt;th class="col-lg-2" style="display:none;"&gt;relatie_id&lt;/th&gt;
        &lt;th class="col-lg-2" style="display:none;"&gt;inschrijving_id&lt;/th&gt;
      &lt;th class="col-lg-1" style="display:none;"&gt;naam_opleiding&lt;/th&gt;
        &lt;th class="col-lg-1"&gt;achternaam&lt;/th&gt;
        &lt;th class="col-lg-1"&gt;tussenvoegsel&lt;/th&gt;
        &lt;th class="col-lg-1"&gt;voornaam&lt;/th&gt;
        &lt;th class="col-lg-1" style="display:none;"&gt;vraag 1&lt;/th&gt;
        &lt;th class="col-lg-1" style="display:none;"&gt;vraag 2&lt;/th&gt;
        &lt;th class="col-lg-1" style="display:none;"&gt;vraag 3&lt;/th&gt;
        &lt;th class="col-lg-1" style="display:none;"&gt;vraag 4&lt;/th&gt;
        &lt;th class="col-lg-1" style="display:none;"&gt;vraag 5&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;/table&gt;
  </code></pre>