Append inside append

Append inside append

I've got a div (mainDiv) that gets appended with a click of button. This 'mainDiv' consists of another div (insideDiv) that needs to be appended inside the 'mainDiv'. In other words, I am trying to append a div which is inside already appended div.

Hope I am clear.

Definitely I am doing something wrong that it's not working. Will much appreciate to know what am I doing wrong here.

HTML form:
  1. <div class="mainDiv">
  2.       <div class="insideDiv">
  3.             Inspected Level
  4.             <select name="locationId[]">
  5.                    // using php code here to get the option values
  6.             </select>
  7.             <input type="button" class="addInsideDiv" value="+" />
  8.       </div>
  9.       <input type="button" id="addMainDiv" value="[ Add ]" />
  10. </div>
jQuery to add INSIDE DIV:
  1. $(".addInsideDiv").click(function() {
  2.       $(".insideDiv").append(
  3.             "<div>Inspected Level "
  4.                   +"<select name=\"locationId[]\">"
  5.                         // using php code here to get the option values
  6.                   +"</select> "
  7.                   +"<input type=\"button\" class=\"removeThis\" value=\"-\" />"
  8.             +"</div>"
  9.       );
  10. });
jQuery to add MAIN DIV
  1. $("#addMainDiv").click(function() {
  2.       $(".mainDiv").append(
  3.             "<div>"
  4.                   +"<button class=\"removeThis\">X</button>"
  5.                   +"<div class=\"insideDiv\">"
  6.                         +"Inspected Level "
  7.                         +"<select name=\"locationId[]\">"
  8.                               // using php code here to get the option values
  9.                         +"</select>"
  10.                         +"<input type=\"button\" class=\"addInsideDiv\" value=\"+\" />"
  11.                   +"</div>"
  12.             +"</div>"
  13.       );
  14. });
jQuery to remove div:
  1. $('.removeThis').live('click', function() {
  2.       $(this).parent().remove();
  3.       return false;
  4. });