title: Dynamically Generate Form Row With Select Populated From Database
body: <p>Here's my dilema. In Laravel, I'm passing <code>inspections</code> to the view like so:</p>
  
  <pre><code>$inspections = Inspection::where("status", "!=", "started")-&gt;get();
  return View::make('process')-&gt;with("inspections", $inspections);
  </code></pre>
  
  <p>Inspections contains a list of all the Inspections that are passed the started stage. In the view, I'm creating a form to process these Inspections like so:</p>
  
  <pre><code>&lt;tr id="row_0" data-row="0"&gt;
    &lt;td&gt;
      &lt;select class="form-control input-sm" name="inspection[0]"&gt;
        &lt;option value=""&gt;&lt;/option&gt;
        @foreach($inspections AS $inspection)
        &lt;option value="{{ $inspection-&gt;id }}"&gt;{{ $inspection-&gt;submission_number }} - {{ $inspection-&gt;policy_number }} - {{ $inspection-&gt;location_address }}&lt;/option&gt;
        @endforeach
      &lt;/select&gt;
    &lt;/td&gt;
    &lt;td&gt;&lt;label class="radio-inline"&gt;&lt;input type="radio" name="received[0]" value="yes" &gt;Yes&lt;/label&gt;&lt;label class="radio-inline"&gt;&lt;input type="radio" name="received[0]" value="no" &gt;No&lt;/label&gt;&lt;/td&gt;
    &lt;td&gt;&lt;label class="radio-inline"&gt;&lt;input id="i_on_0" type="radio" name="invoiced[0]" value="yes" onclick="toggleInvoice(this);" data-row="0"/&gt;Yes&lt;/label&gt;&lt;label class="radio-inline"&gt;&lt;input id="i_off_0" type="radio" name="invoiced[0]" value="no" onclick="toggleInvoice(this);" data-row="0"/&gt;No&lt;/label&gt;&lt;/td&gt;
    &lt;input type="hidden" id="in_0" name="invoice_number[0]" disabled/&gt;
    &lt;td&gt;&lt;input type="text" id="ia_0" name="invoice_amount[0]" class="form-control input-sm" disabled/&gt;&lt;/td&gt;
    &lt;td&gt;&lt;label class="radio-inline"&gt;&lt;input type="radio" id="p_on_0" name="paid[0]" value="yes" disabled/&gt;Yes&lt;/label&gt;&lt;label class="radio-inline"&gt;&lt;input type="radio" id="p_off_0" name="paid[0]" value="no" disabled/&gt;No&lt;/label&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Which creates the following:</p>
  
  <p><img src="https://i.stack.imgur.com/XDCvX.png" alt="Capture"></p>
  
  <p>This is fine and dandy, but I have no idea how to append another row to this table and <strong>still display the value of each option</strong>. Right now, I have my + button call the following function in Javascript:</p>
  
  <pre><code>function appendProcessingRow(){
    var current_row = $("#processing_table tr:last").attr("data-row");
    var content = '&lt;tr id="row_' + (parseInt(current_row) + 1) + '" data-row="' + (parseInt(current_row) + 1) + '"&gt;&lt;td&gt;&lt;input type="text" name="policy_number[' + (parseInt(current_row) + 1) + ']" class="form-control input-sm"/&gt;&lt;/td&gt;&lt;td&gt;&lt;label class="radio-inline"&gt;&lt;input type="radio" name="received[' + (parseInt(current_row) + 1) + ']" value="yes"&gt;Yes&lt;/label&gt;&lt;label class="radio-inline"&gt;&lt;input type="radio" name="received[' + (parseInt(current_row) + 1) + ']" value="no"&gt; No&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;label class="radio-inline"&gt;&lt;input type="radio" name="invoiced[' + (parseInt(current_row) + 1) + ']" value="yes" onclick="toggleInvoice(this);" data-row="' + (parseInt(current_row) + 1) + '"/&gt; Yes&lt;/label&gt;&lt;label class="radio-inline"&gt;&lt;input type="radio" name="invoiced[' + (parseInt(current_row) + 1) + ']" value="no" onclick="toggleInvoice(this);" data-row="' + (parseInt(current_row) + 1) + '"/&gt; No&lt;/label&gt;&lt;/td&gt;&lt;input type="hidden" id="in_' + (parseInt(current_row) + 1) + '" name="invoice_number[' + (parseInt(current_row) + 1) + ']" disabled/&gt;&gt;&lt;td&gt;&lt;input type="text" id="ia_' + (parseInt(current_row) + 1) + '" name="invoice_amount[' + (parseInt(current_row) + 1) + ']" class="form-control input-sm" disabled/&gt;&lt;/td&gt;&lt;td&gt;&lt;label class="radio-inline"&gt;&lt;input type="radio" id="p_on_' + (parseInt(current_row) + 1) + '" name="paid[' + (parseInt(current_row) + 1) + ']" value="yes" disabled/&gt; Yes&lt;/label&gt;&lt;label class="radio-inline"&gt;&lt;input type="radio" id="p_off_' + (parseInt(current_row) + 1) + '" name="paid[' + (parseInt(current_row) + 1) + ']" value="no" disabled/&gt; No&lt;/label&gt;&lt;/td&gt;&lt;/tr&gt;';
    $('#processing_table &gt; tbody:last').append(content);
  }
  </code></pre>
  
  <p>Which works, but creates an <code>&lt;input&gt;</code> tag instead of the select option. See the following:</p>
  
  <p><img src="https://i.stack.imgur.com/0D93N.png" alt="Capture2"></p>
  
  <p>My question, how would I got about creating the same row layout in Javascript, keeping in mind that the select is generated by <code>@foreach</code> in Laravel? Tried putting the: </p>
  
  <pre><code>&lt;select class="form-control input-sm" name="inspection[0]"&gt;
    &lt;option value=""&gt;&lt;/option&gt;
    @foreach($inspections AS $inspection)
    &lt;option value="{{ $inspection-&gt;id }}"&gt;{{ $inspection-&gt;submission_number }} - {{ $inspection-&gt;policy_number }} - {{ $inspection-&gt;location_address }}&lt;/option&gt;
    @endforeach
  &lt;/select&gt;
  </code></pre>
  
  <p>Inside the Javascript <code>appendProcessingRow()</code> And it "worked" to an extent, but the values aren't there:</p>
  
  <p><img src="https://i.stack.imgur.com/2GQio.png" alt="Capture3"></p>
  
  <p>So, any help would be appreciated. Thanks in advance, sorry for the long post.</p>