CODEWITHSUNDEEP
javascriptjqueryhtml
Sohjiro
Sohjiro

Reputation: 23

Trouble duplicating a div

I'm new to Javascript and jQuery and I'm trying to clone the "Person[1]" div inside the "peopleID" div with the click of the button as many times as needed and I can't seem to figure out what I've done wrong.

jsfiddle

Javascript

$(document).ready(function() {
  $('#add').click(function() {
    var clonedDiv = $('#Person[1]').clone();
    $('#peopleID').after(clonedDiv);
  });
});

HTML Code

<form>
  <input id="add" value="Add Additional Field" type="button">
  <div id="peopleID">
    <div id="Person[1]">
      <select name="Personnel[1]">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </select>
    </div>
  </div>
</form>

Upvotes: 1

Views: 31

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115222

You need to escape square bracket in selector since it has special meaning in selectors otherwise, it will search for an element with id Person and has attribute 1 since square bracket act as has attribute selector. 

$('#Person\\[1\\]').clone();

Or you can use attribute equals selector as an alternative.

$('[id="Person[1]"]').clone();

Upvotes: 1

Related Questions