Save dynamic html form data to table (Laravel 5.2)

Question

I have created a dynamic form for making an offer and i don't know how to solve the problem saving that data to a database. I'm using Laravel 5.2 and now i need to make a model and controller....can someone help me please?

How to save this into a database table?

I'm open for hints and tips too, maybe it could be done somehow differently?

This is live form
JSFiddle

<div>
<h1>Angebot</h1>
<form method="POST" action="" accept-charset="UTF-8">
<table id="t1">
    <tr>
        <th><button type="button" class="addRow">Personal hinzuf&uuml;gen</button></th>
        <th>Anzahl</th>
        <th>Preis pro Stunde</th>
        <th>Stunden</th>
        <th>Total</th>
    </tr>
    <tr id="row0" class="item">
        <td><select name="personal" class="select"><optgroup label="Personal">
            <option selected="true" disabled="true" style="display:none">--ausw&auml;hlen</option>
            <option value="koeche">K&ouml;che</option>
            <option value="barkeeper">Barkeeper</option>
            <option value="garderobiere">Garderobiere</option>
            <option value="chauffeure">Chauffeure</option>
            <option value="oberkellner">Oberkellner</option>
            <option value="serviceleitung">Serviceleitung</option>
            <option value="hilfskoch">Hilfskoch</option>
            <option value="servicekraefte">Servicekr&auml;fte</option>
            </optgroup>
            </select></td>
        <td><input name="anzahl" class="qnty amount" value="" type="number" min="0" step="1"/></td>
        <td><input name="preisps" class="price amount" value="" /></td>
        <td><input name="stunden" class="hours amount" value="" /></td>
        <td><input name="total" class="total" value="" readonly="readonly" /></td>
    </tr>
</table>

<br />

<table id="t2">
  <tr>
    <th>Netto =<br></th>
    <th><input id="netto" readonly="readonly" name="netto" type="text" value=""></th>
  </tr>
  <tr>
    <td>Steuer 19% =<br></td>
    <td><input id="steuer" readonly="readonly" name="steuer" type="text" value=""></td>
  </tr>
  <tr>
    <td>Brutto =<br></td>
    <td><input id="brutto" readonly="readonly" name="brutto" type="text" value=""></td>
  </tr>
</table>
    <br>
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
  </form>
</div>

and here is the javascript code

// main function when page is opened
    $(document).ready(function () {
        // function for adding a new row
        var r = 0;
        if(r<11){
            $('.addRow').click(function () {
                r++;
                $('#t1').append('<tr id="row' + r + '" class="item"><td><select name="personal' + r + '" class="select"><optgroup label="Personal"><option selected="true" disabled="true" style="display:none">--ausw&auml;hlen</option><option value="koeche">K&ouml;che</option><option value="barkeeper">Barkeeper</option><option value="garderobiere">Garderobiere</option><option value="chauffeure">Chauffeure</option><option value="oberkellner">Oberkellner</option><option value="serviceleitung">Serviceleitung</option><option value="hilfskoch">Hilfskoch</option><option value="servicekraefte">Servicekr&auml;fte</option></optgroup></select></td><td><input name="anzahl' + r + '" class="qnty amount" value="" type="number" min="0" step="1"/></td><td><input name="preisps' + r + '" class="price amount" value="" /></td><td><input name="stunden' + r + '" class="hours amount" value="" /></td><td><input name="total' + r + '" class="total" value="" readonly="readonly" /></td><td><button type="button" name="remove" id="' + r + '" class="btn_remove">X</button></td></tr>');
            });
            // remove row when X is clicked
            $(document).on("click", ".btn_remove", function () {
                var button_id = $(this).attr("id");
                $("#row" + button_id + '').remove();
            });

            // calculate everything
            $(document).on("keyup", ".amount", calcAll);
        }
    });

    // function for calculating everything
    function calcAll(event) {
        // calculate total for one row
          $(".item").each(function () {
            var qnty = 1;
            var price = 1;
            var hours = 1;
            var total = 1;
            if (!isNaN(parseFloat($(this).find(".qnty").val()))) {
                qnty = parseFloat($(this).find(".qnty").val());
            }
            if (!isNaN(parseFloat($(this).find(".price").val()))) {
                price = parseFloat($(this).find(".price").val());
            }
            if (!isNaN(parseFloat($(this).find(".hours").val()))) {
                hours = parseFloat($(this).find(".hours").val());
            }
            total = qnty * price * hours;
            $(this).find(".total").val(total.toFixed(2));
        });


        // sum all totals
        var sum = 0;
        $(".total").each(function () {
            if (!isNaN(this.value) && this.value.length != 0) {
                sum += parseFloat(this.value);
            }
        });

        // show values in netto, steuer, brutto fields
        $("#netto").val(sum.toFixed(2));
        $("#steuer").val(parseFloat(sum * 0.19).toFixed(2));
        $("#brutto").val(parseFloat(sum + parseFloat(($("#steuer").val()))).toFixed(2));

    }

    // replace , with . and block writing letters
    $.fn.ForceNumericOnly = function() {
            return this.each(function() {
          if($(this).data('forceNumericOnly')){ return; }
          $(this).data('forceNumericOnly', true);
                $(this).keydown(function(e) {
                    if(e.keyCode==188 || e.keyCode==110 || e.keyCode==108){
                        e.preventDefault(); 
                        $(this).val($(this).val() + '.');
                    }
                        var key = e.charCode || e.keyCode || 0;
                        return (key == 8 || key == 9 || key == 46 || key == 110 || key == 188 || key == 190 || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));                
                });
            });
    };
    // execute function on element focus
    $(document).on('focus', '.amount', function(){
        $(this).ForceNumericOnly();
    });

Answer 1

For the first question

1) you added "r" variable for rows limit in wrong place so add like below

 var r = 1; 
 $('.addRow').click(function () {
  if(r<10)
       {  
        r++;
        $('#t1').append('<tr id="row' + r + '" class="item"><td><select name="personal' + r + '" class="select"><optgroup label="Personal"><option selected="true" disabled="true" style="display:none">--ausw&auml;hlen</option><option value="koeche">K&ouml;che</option><option value="barkeeper">Barkeeper</option><option value="garderobiere">Garderobiere</option><option value="chauffeure">Chauffeure</option><option value="oberkellner">Oberkellner</option><option value="serviceleitung">Serviceleitung</option><option value="hilfskoch">Hilfskoch</option><option value="servicekraefte">Servicekr&auml;fte</option></optgroup></select></td><td><input name="anzahl' + r + '" class="qnty amount" value="" type="number" min="0" step="1"/></td><td><input name="preisps' + r + '" class="price amount" value="" /></td><td><input name="stunden' + r + '" class="hours amount" value="" /></td><td><input name="total' + r + '" class="total" value="" readonly="readonly" /></td><td><button type="button" name="remove" id="' + r + '" class="btn_remove">X</button></td></tr>');
        }
    });

    // remove row when X is clicked
    $(document).on("click", ".btn_remove", function () {
        r--;
        var button_id = $(this).attr("id");
            $("#row" + button_id + '').remove();
        });

after above change you will add only 10 row in the table.

2) Question you need to create one json from the created table structure and pass that json in the server side through ajax and in server side parsing your json and store that information in the database.

And from the table design look like it will be 2 table one table have master information and another detail table which have detail information.

Please let me know if you need sample code for that.