title: Clearing the value of a dynamically created text-box which is present inside the dataTable
body: <p>I've created a table with four columns. Few text-boxes and a select drop-down are created dynamically inside the table, when the new form is loaded. I also have a text-box(Final Value), where the user will enter a value. This is how it actually appears:</p>
  
  <pre><code>ID |    Users    |   Values   | Values to be billed
   1 | (drop-down) | (text-box) |      (text-box) 
   2 | (drop-down) | (text-box) |      (text-box) 
   3 | (drop-down) | (text-box) |      (text-box) 
   4 | (drop-down) | (text-box) |      (text-box) 
   .
   .
   8 | (drop-down) | (text-box) |      (text-box)  
  </code></pre>
  
  <p>The table has a "Total Value" at the footer. When ever the user enters the value in one text-box inside the table and moves to the another text-box, the value is summed up. At the end, value in the "id = total_value" and "id = value_to_be_billed" should be same.</p>
  
  <p>When the form is submitted, I validate the Final Value text-box, value in "id = total_value" and value in "id = value_to_be_billed". All of these should have the same value. Then I only save the value taken from the Final Value text-box(since others have the same value).</p>
  
  <p>When the new form is loaded, all those text-boxes and the select drop-down in the table and the Final Value text-box should be empty.</p>
  
  <p>This is how I tried:</p>
  
  <pre><code>  HTML:
  &lt;div class="col-sm-6"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label class="col-sm-6"&gt;Final Value&lt;/label&gt;
                              &lt;div class="col-sm-6"&gt;
                                  &lt;input type="text" id="final_value" name="final_value" class="form-control" placeholder="final_value" required="required"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
      &lt;div class="col-sm-6"&gt;
                              &lt;table border="0" cellpadding="0" cellspacing="0" width="100%" id="value_table" class="table table-bordered table-colstriped table-hover display"&gt;
                                  &lt;thead&gt;
                                      &lt;tr&gt;
                                          &lt;th class="col-sm-3"&gt;ID&lt;/th&gt;
                                          &lt;th class="col-sm-3"&gt;Users&lt;/th&gt;
                                          &lt;th class="col-sm-3"&gt;Values&lt;/th&gt;
                                          &lt;th class="col-sm-3"&gt;Values to be billed&lt;/th&gt;
                                      &lt;/tr&gt;
                                  &lt;/thead&gt;
                                  &lt;tbody&gt;
                                      &lt;tr class="odd"&gt;
                                          &lt;td class="dataTables_empty" valign="top" colspan="3"&gt;No data available in table&lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/tbody&gt;
                                  &lt;tfoot&gt;
                                      &lt;tr&gt;
                                          &lt;th colspan="2"&gt;Total Value&lt;/th&gt;
                                          &lt;th&gt;
                                              &lt;div name="total_value" id="total_value" class="text-right" style="margin-right:13px;"&gt;0&lt;/div&gt;
                                          &lt;/th&gt;
                                          &lt;th&gt;
                                              &lt;div name="value_to_be_billed" id="value_to_be_billed" class="text-right" style="margin-right:13px;"&gt;0&lt;/div&gt;
                                          &lt;/th&gt;
                                      &lt;/tr&gt;
                                  &lt;/tfoot&gt;
                              &lt;/table&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>JQUERY:</p>
  
  <pre><code> jQuery("#value_table").dataTable({
                      "sAjaxSource": "db.php?mode=dataTable&amp;id=" + jQuery("#id").val(),
                      "bDestroy": true,
                      "bPaginate": false,
                      "bInfo": false,
                      "bFilter": false,
                      "bSort": false,
                      "aoColumnDefs": [
                          {
                              "aTargets": [0],
                              "mRender": function(data, type, row) {
                                  return data + '&lt;input type="hidden" class="serial_no" name="serial_no[]" id="serial_no" value="' + row[4] + '"&gt;';
                              }
                          },
                          {
                              "aTargets": [1],
                              "mRender": function(data, type, row) {
                                  return '&lt;select name="user_id[]" id="user_id_' + row[4] + '_' + data + '" class="form-control user_id"&gt;&lt;option value=""&gt;--- Select User ---&lt;/option&gt;&lt;/select&gt;';
                              }
                          },
                          {
                              "aTargets": [2],
                              "mRender": function(data, type, row) {
                                  return '&lt;input type="text" class="form-control text-right" name=value[]" id="value" value="' + row[2] + '" onchange="jQuery(this).Sum(\'total_value\');"&gt;';
                              }
                          },
                          {
                              "aTargets": [3],
                              "mRender": function(data, type, row) {
                                  return '&lt;input type="text" class="form-control text-right" name="billing_value[]" id="billing_value" value="' + row[3] + '" onchange="jQuery(this).Sum(\'value_to_be_billed\');"&gt;';
                              }
                          }
                      ]
                  });
  </code></pre>
  
  <p>This is how I tried to clear the controls:</p>
  
  <pre><code>jQuery("#final_value").val("");
  </code></pre>
  
  <p>When a new form is loaded, around 8 rows will be created dynamically. The first column will contain IDs from 1 - 8. The second column will contain select drop-down, which will contain names of the users(making the admin to select the user). Each row will have this drop-down(it is created dynamically for each and every row). The third and fourth columns will contains empty text-boxes where the user will enter the values(these are also created dynamically for each and every row). </p>
  
  <p>My problem is, when a new form is loaded, the first row(against ID 1) is getting filled with the data that was submitted in the previous form. Like:</p>
  
  <pre><code>ID|Users|Values|Values to be billed 
  1 | Sai | 20   | 20
  2 |     |      |    
  3 |     |      |
  .
  .
  8 |     |      |
  All others are empty.
  </code></pre>
  
  <p>I don't know how to clear that(since it is inside the table).</p>
  
  <p>This is how I tried to clear them:</p>
  
  <pre><code>jQuery(".user_id").val("").trigger("change");//(clearing the dynamically drop-down inside the table)
  jQuery("#value").val("");//(clearing the dynamically created text-box inside the table)
  jQuery("#billing_value").val("");//(clearing the dynamically created text-box inside the table)
  </code></pre>
  
  <p>I don't why that data is getting displayed when I load the new form. What's wrong with the code? What should I change or add to correct it?</p>