How to preview values of dynamically generated fields in rows of a table

How to preview values of dynamically generated fields in rows of a table

I desperately need some guidance in solving this, please.
I have a form on my website where users fill an input field and selects from a drop down. For more options, a button is provided to generate more fields dynamically for users. That works fine. Now, I’m trying to implement a functionality that previews the orders made by users (in a table format) immediately the user finish filling the orders field and the name field receives focus. With what i've done so far I'm having all the values displayed on a single row separated by comma instead of returning each on a row.
My html:
  1. <form class="form-horizontal" method="post" action="" id="order_form">
      <fieldset class="orders_det">
        <div class="form-group">
          <label for="prod_type">Type</label>
          <select name="prod_type[]" class="form-control prod">
            <option value="">-- Select Products --</option>
            <option value="prod1">Prod1</option>
            <option value="prod2">Prod2</option>
            <option value="prod3">Prod3</option>
          </select>
        </div>
        <div class="form-group">
          <label for="quant" class="control-label col-md-2">Quantity</label>
          <div class="form-control col-md-6">
            <input type="text" class="form-control quant" name="quant[]">
          </div>
          <div>
            <button type="button" class="btn btn-success" id="more_btn">Add More Orders + </button>
          </div>
        </div>
        <div class="more_orders">
        </div>
      </fieldset>
      <div class="form-group">
        <label for="name" class="col-md-2 control-label">Name</label>
        <div class="col-md-8">
          <input type="text" class="form-control name" name="name">
        </div>
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-success" name="order_submit" id="order_submit">Submit Order</button>
      </div>
    </form>
    <div class="orders_preview"></div>                  
and my jquery:

  1. $(document).ready(function() {
  2.   $('form button#more_btn').on("click", function(e) {//to generate dynamic fields
  3.     e.preventDefault();
  4.     var moreOrders = '';
  5.           moreOrders += '<div class="new_order">';
  6.           moreOrders += '<div class="form-group">';
  7.           moreOrders += '<label for="prod_type">Type</label>';
  8.           moreOrders += '<select name="prod_type[]" class="form-control prod">';
  9.           moreOrders += '<option value="">-- Select Products --</option>';
  10.           moreOrders += '<option value="prod1">Prod1</option>';
  11.           moreOrders += '<option value="prod2">Prod2</option>';
  12.           moreOrders += '<option value="prod3">Prod3</option>';
  13.           moreOrders += '</select>';
  14.           moreOrders += '</div> ';
  15.           moreOrders += '<div class="form-group">';
  16.           moreOrders += '<label for="quant" class="control-label col-md-2" >Quantity</label>';
  17.           moreOrders += '<div class="form-control col-md-6">';
  18.           moreOrders += '<input type="text" class="form-control quant" name="quant[]">';
  19.           moreOrders += '</div>';
  20.           moreOrders += '<div>';
  21.           moreOrders += '</div><br />';
  22.           $('.more_orders').append(moreOrders);
  23.   });

  25.   $("form input.name").on("focus", function(e) {//to generate a preview table
  26.     var prod = $("form select[name='prod_type[]']").map(function() {
  27.       return $(this).val();
  28.     }).get();
  29.     var quant = $("form input[name='quant[]']").map(function() {
  30.       return ($(this).val());
  31.     }).get();
  32.     var table = '';
  33.           table += '<table>';
  34.           table += '<thead>';
  35.           table += '<tr>';
  36.           table += '<th>Product</th>';
  37.           table += '<th>Quantity</th>';
  38.           table += '</tr>';
  39.           table += '</thead>';
  40.           table += '<tbody>';
  41.           table += '<tr>';
  42.           table += '<td>' + prod + '</td>';
  43.           table += '<td>' + quant + '</td>';
  44.           table += '</tr>';
  45.           table += '</tbody>';
  46.           table += '</table>';
  47.           $(".orders_preview").append(table);
  48.         });
  49. });
Please find a jfiddle for this here