I have 3 fields in a row, I'm not using table. So I would like to know is it possible to add new 'row' which is using div tag when click on the + button?

The code is as follow.

<div id="order-details-booking">
        <blockquote>Self-order Menu</blockquote>
        <div class="row">
            <div class="input-field col s4">
                <input type="text" class="item-code" placeholder="Item Code"/>
            </div>
            <div class="input-field col s2">
                <input type="text" class="qty" placeholder="Qty" />
            </div>
            <div class="input-field col s5">
                <input type="text" class="order-remarks" placeholder="Remarks" />
            </div>
            <div class="col s1">
                <i class="material-icons">add</i>
            </div>
        </div>
    </div>

Initially, it only has 1 row.

What I want is, after clicking the + button, it will add a new row like this.

I have 3 fields in a row, I'm not using table. So I would like to know is it possible to add new 'row' which is using div tag when click on the + button?

The code is as follow.

<div id="order-details-booking">
        <blockquote>Self-order Menu</blockquote>
        <div class="row">
            <div class="input-field col s4">
                <input type="text" class="item-code" placeholder="Item Code"/>
            </div>
            <div class="input-field col s2">
                <input type="text" class="qty" placeholder="Qty" />
            </div>
            <div class="input-field col s5">
                <input type="text" class="order-remarks" placeholder="Remarks" />
            </div>
            <div class="col s1">
                <i class="material-icons">add</i>
            </div>
        </div>
    </div>

Initially, it only has 1 row.

What I want is, after clicking the + button, it will add a new row like this.

• javascript
• jquery
• html
• css
• asp-mvc

• 2 Yes it is very much possible. – Rishabh Commented Nov 28, 2016 at 10:31
• Yes, but a bit pointless using the html you have shown - it would be creating duplicate id attributes (invalid html) and you would not be able to bind to a model when you submit – user3559349 Commented Nov 28, 2016 at 10:32
• adding a new row is possible but the main question is how are you planning to post it to the server? are you depending on MVC default model binder or use jquery and fomat your data before sending to server.. – Rajshekar Reddy Commented Nov 28, 2016 at 10:56
• @Reddy, I wanted to use MVC binding to array. I'm using RavenDB, and I intended to pass the data like in one booking has an array model FoodOrder[]. But I find it hard for me to bind to array. Or do u have any other better idea than this? – jenna_3108 Commented Nov 28, 2016 at 13:17
• @jenna_3108, RavenDB has got nothing to do with your issue. If you want to dynamically add collection items in a view, refer this answer – user3559349 Commented Nov 28, 2016 at 23:46

2 Answers 2

You can use jQuery to add as well as remove form fields with id increment. Please have a look at the snippet below:

// Cloning Form
  var id_count = 1;
  $('.add').on('click', function() {
    var source = $('.form-holder:first'), clone = source.clone();
    clone.find(':input').attr('id', function(i, val) {
      return val + id_count;
    });
    clone.appendTo('.form-holder-append');
    id_count++;
  });

// Removing Form Field
$('body').on('click', '.remove', function() {
    var closest = $(this).closest('.form-holder').remove();
  });

.form-holder {
  display: flex;
  margin-bottom: 10px;
}

.input-field input {
  width: 100px;
}

.add, .remove {
  display: block;
  border: 1px solid #ccc;
  padding: 2px 10px;
  margin-left: 10px;
  cursor: pointer;
}

.add:hover {
  background: #eee;
}

.remove {
  display: none;
}

.form-holder-append .remove {
  display: block;
}

body {
  margin: 20px;
}

<link href="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="order-details-booking">
        <blockquote>Self-order Menu</blockquote>
        <div class="row">
          <div class="form-holder col-xs-12">
            <div class="input-field col s4">
                <input type="text" id="item-code" placeholder="Item Code"/>
            </div>
            <div class="input-field col s2">
                <input type="text" id="item-code" placeholder="Qty" />
            </div>
            <div class="input-field col s5">
                <input type="text" id="item-code" placeholder="Remarks" />
            </div>
            <div class="col s1">
                <i class="material-icons remove">- remove</i>
            </div>
        </div>

          <div class="form-holder-append"></div>
          <div class="row">
                    <div class="col-xs-4">
                          <i class="material-icons add">+ add</i>
            </div></div>
    </div>
</div>


<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Hope this helps!

Use clone() method. It will create a duplicate object of the row you want to append. Use this object to add new rows to your parent div.

find("input[type='text']").val("") will clear any value entered in the original elements.

Also, as pointed out by others, your HTML has ids attached to elements which when duplicated creates multiple elements with same id. You should avoid using ids in such scenarios and use classes as selectors.

$('#order-details-booking').on('click','.material-icons',function(){
   $(this).closest('.row').clone().appendTo('#order-details-booking').find("input[type='text']").val("");//use closest to avoid multiple selection and clear input text elements
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="order-details-booking">
        <blockquote>Self-order Menu</blockquote>
        <div class="row">
            <div class="input-field col s4">
                <input type="text" id="item-code" placeholder="Item Code"/>
            </div>
            <div class="input-field col s2">
                <input type="text" id="item-code" placeholder="Qty" />
            </div>
            <div class="input-field col s5">
                <input type="text" id="item-code" placeholder="Remarks" />
            </div>
            <div class="col s1">
                <i class="material-icons">add</i>
            </div>
        </div>
    </div>