Having a difficulty adding a new form in each new

Having a difficulty adding a new form in each new

In my adventure to create a To-Do list application, I've run into another
problem. In my code, every time a user clicks "New Category" a new div
will appear with their custom name and number of forms. However, when
another div is created, its' forms are given to the previous div. Here's
that code:
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script type='text/javascript' src="script.js"></script>
<script>
$(function() {
$("#new").click(function() {
var canContinue = true;
var newCategory = prompt("Enter the name you want for your category:");
if(newCategory.length === 0){
confirm("A new category can not be created - nothing was entered in
the text area.");
canContinue = false;
}
if(canContinue){
var categorySections = prompt("Enter the number of sections needed for
this category:");
$("body").append("<div id = \"newDiv\"><p>" + newCategory +
"</p></div>");
}
for(var i = 0; i < categorySections; i++){
$("#newDiv").append("<form> Thing to do: <input type =
\"text\"></form><br>");
}
});
});
</script>
So, I tried creating a separate function using the "this" keyword where
the forms were created after the div was ready, but now no forms are
created at all! Here's that code:
$(function(){
$("#newDiv").ready(function() {
for(var i = 0; i < categorySections; i++){
$(this).append("<form> Thing to do: <input type =
\"text\"></form><br>");
}
});
});
So, how do I create forms for each separate div? Thanks in advance!