Add a list element after another list with jQuery

Question

I am trying to have some inputs for my users, and I want them to be able to hit a button to add another row of inputs. I am trying to use jQuery to add a list of inputs after the first.

Here is what I have tried so far:

$("#addButton").on("click", function() {
  $("#inputs").append($("#linear"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inputs">
  <ul class="linearFeetCalc" id="linear">
    <li><input type="number" placeholder="Quantity" id="quantity"></li>
    <li><input type="number" placeholder="Length" id="length"></li>
    <li><input type="number" placeholder="Width" id="width"></li>
    <li><input type="number" placeholder="Height" id="height"></li>
    <li><input type="checkbox" id="stackable"> Stackable?</li>
    <li><input type="checkbox" id="turnable"> Turnable?</li>
  </ul>
</div>
<button id="addButton">Add Item</button>

George · Accepted Answer · 2018-01-05 16:26:54Z

2

Very close. you just need to clone it first:

$("#addButton").on("click", function() {
    $("#inputs").append($("#linear").clone());
});

Edit: You should also change the ID to prevent duplicates in your DOM:

`...$("#linear").clone().prop('id', '#linear2')...`

edited Jan 5, 2018 at 16:26

answered Jan 5, 2018 at 16:23

George

2,0561 gold badge13 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vignesh Raja Over a year ago

Also the input elements inside the list will get duplicated with duplicate ids. Will that will not a problem ? @George

George Over a year ago

Oh the rabbit hole goes deeper!

Collectives™ on Stack Overflow

Add a list element after another list with jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related