How to dynamically add rows to a form in html when i click on add row button?

Issue

<div class="row">
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Act</label>
            <input type="text" class="form-control" v-model="act" >
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Section </label>
            <input type="text" class="form-control" v-model="section">
        </div>
    </div>
    <button>Add row</button>
</div>

So, when I click on add button, i need to keep on adding the above row. How can I able to add this row when I click on add row button.

I need to pass values as BOOKED UNDER :

[{
    act :,
    section:,
}]

If I have more rows i need to pass values as comma seperated. I am weak in js and this is my first project having this kind of problem. How can I able to add values in this way.

My vue js code is

addForm = new Vue({
    el: "#addForm",
    data: {
        bookedUnder:[],
        act: '',
        section:'',
    },
    methods: {
        handleSubmit: function(e) {
            var vm = this;
            data['otherNatureofOffense'] = //in the abve way
            $.ajax({
                url: 'http://localhost:3000/record/add/f/',
                data: data,
                type: "POST",
                dataType: 'json',
                success: function(e) {
                    if (e.status) {
                        vm.response = e;
                        alert("success")
                    } else {
                        vm.response = e;
                        console.log(vm.response);
                        alert(" Failed") 
                    }
                }
            });
            return false;
        }, 
    },
});

Please help me to have a solution

Solution

You need to v-for the fields first then post the model like this:

<div class="row" v-for="(book, index) in bookedUnder" :key="index">
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Act {{index}}</label>
            <input type="text" class="form-control" v-model="book.act" >
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Section {{index}}</label>
            <input type="text" class="form-control" v-model="book.section">
        </div>
    </div>

</div>
<button @click="addNewRow">Add row</button>



addForm = new Vue({
    el: "#addForm",
    data: {
        bookedUnder:[
          {
             act: null,
             section: null,
          },
        ],
    },
    methods: {
        addNewRow: function() {
          this.bookedUnder.push({ act: null, section: null, });
        },
        handleSubmit: function(e) {
            var vm = this;
            $.ajax({
                url: 'http://localhost:3000/record/add/f/',
                data: vm.bookedUnder,
                type: "POST",
                dataType: 'json',
                success: function(e) {
                    if (e.status) {
                        vm.response = e;
                        alert("success")
                    } else {
                        vm.response = e;
                        console.log(vm.response);
                        alert(" Failed") 
                    }
                }
            });
            return false;
        }, 
    },
});

Answered By - Georgi Antonov