title: How to add drop down list in every row of dynamic table which fetch data from server?
body: <p>I want to add <strong>static drop downlist</strong> to every row of dynamic table which fetch the data from server, <strong>How I will do this?</strong><br>
  I want to make same <a href="http://jsfiddle.net/JPVUk/10/" rel="nofollow">like this</a>,(<strong>please check drop downlist type</strong>) but it will also fetch data from server and every row of column will have drop drownlist.</p>
  
  <p><strong>Following is updated and working code, thanks to @angu</strong></p>
  
  <p><strong>Structure of drop down list.</strong>  </p>
  
  <pre><code>    &lt;select &gt;       
          &lt;option value="1"&gt;NewJob&lt;/option&gt;
          &lt;option value="2"&gt;InProgress&lt;/option&gt;
          &lt;option value="3"&gt;CloseJon&lt;/option&gt;
      &lt;/select&gt;
  </code></pre>
  
  <p><strong>Dynamic Table</strong></p>
  
  <pre><code>    &lt;div class="span9" id="content"&gt;        
          &lt;div class="row-fluid"&gt;
              &lt;div class="block"&gt;
                  &lt;div class="navbar navbar-inner block-header"&gt;
                      &lt;div class="muted pull-left"&gt;Carpenter Services&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="block-content collapse in"&gt;
                      &lt;div class="span12"&gt;
                           &lt;table class="data-contacts1-js table table-striped" &gt;
                                &lt;thead&gt;
                                  &lt;tr&gt;
                                        &lt;th&gt;ID&lt;/th&gt;
                                        &lt;th&gt;Customer Name&lt;/th&gt;
                                        &lt;th&gt;Customer Mobile&lt;/th&gt;
                                        &lt;th&gt;Customer Email&lt;/th&gt;                                                                             
                                  &lt;/tr&gt;
                                &lt;/thead&gt;
                            &lt;tbody&gt;
  
                            &lt;/tbody&gt;
                          &lt;/table&gt;                                    
                     &lt;/div&gt;
  
  
      &lt;button id="fetchContacts1" class="btn btn-default" type="submit"&gt;Refresh&lt;/button&gt;                          
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- /block --&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>&lt;script&gt;
               function fetchData1(){                          
                  $(".data-contacts1-js tbody").empty();
                  $.get("http://localhost/service/Services.php", function(data) {                    
                     var obj=JSON.parse(data);                       
                     for(var i in data){
                       var tr=$("&lt;tr&gt;&lt;/tr&gt;");
                       tr.append(
                              "&lt;td&gt;" + obj[i].b_id + "&lt;/td&gt;" +
                              "&lt;td&gt;" + obj[i].cust_name + "&lt;/td&gt;" +                           
                              "&lt;td&gt;" + obj[i].cust_mobile + "&lt;/td&gt;" +                           
                              "&lt;td&gt;" + obj[i].cust_email + "&lt;/td&gt;"
                          );
                      tr.append("&lt;select class='input-small'&gt;&lt;option value='New Job'&gt;NewJob&lt;/option&gt;&lt;option value='WIPJob'&gt;WIP Job&lt;/option&gt;&lt;/select&gt;");
                       $(".data-contacts1-js tbody").append(tr);
                       i++;
                     }
                  });
              }  
  
               $(document).ready(function(){
                    $(".data-contacts1-js tbody").empty();
                  $('#fetchContacts1').click(function() {
                       fetchData1();
                  });
              });
          &lt;/script&gt;
  </code></pre>