How do I add input fields with jquery for multiple inputs? - php

Question

I want to be able to add n number of books to n number of authors. What I want to do is this:
where the light blue boxes are the buttons. I want to add multiple books to a author with the "add book" button.
the code that I have is this:
<form action="next.php" method="post">
<div class="input_fields_wrap">
<button class="add_field_button">Add Author</button>
<div><input type="text" name="myAuthorText[]"></div>
<button class="add_sub_field_button">Add Author Books</button>
<div><input type="text" name="myBooksText[]"></div>
</div>
</form>
<SCRIPT language="javascript">
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var add_subButton = $(".add_sub_field_button"); //Add sub button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="myAuthorText[]"/>Remove</div>'); //add input box
}
});
$(add_subButton).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="myBooksText[]"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</SCRIPT>
what I'm getting is:

Answer 1

Check this code snippet. I made some chnages in HTML and Javascript too. Please compare it with your original one to see the differences. Hope it will help you a bit:
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var commonPart = $("#commonPart");
var add_button = $(".add_field_button"); //Add button ID
var add_subButton = $(".add_sub_field_button"); //Add sub button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
var htmlToAdd = commonPart.clone().attr("id","commonPart_"+x);
htmlToAdd.find(".addedDiv").remove();
$(wrapper).append(htmlToAdd); //add input box
x++; //text box increment
}
});
$(document).on("click",".add_sub_field_button",function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(this).closest(".commonPart").append('<div class="addedDiv"><input type="text" class="bookname" name="myBooksText[]" placeholder="Book name"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
.bookname{
margin-left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action="next.php" method="post">
<div class="input_fields_wrap">
<button class="add_field_button">Add Author</button>
<div id="commonPart" class="commonPart">
<div><input type="text" name="myAuthorText[]" placeholder="Auth name"></div>
<button class="add_sub_field_button">Add Author Books</button>
<div><input type="text" class="bookname" name="myBooksText[]" placeholder="Book name"></div>
</div>
</div>
</form>

Answer 2

You can use jquery.clone()
Like this:
$( "#id-of-input" ).clone().appendTo( "#id-of-same-div" );
Place this inside button click.
JSFiddle

Answer 3

Not a full answer, but this gives the nesting that you're looking for and lets you add books to multiple authors. I couldn't get the "saving" to work properly, I suspect the script in your question is not the complete script.
Key changes:
added styling to indent books
don't show the add book button until there is an author
add the "add book" button below each author
add books inside the author block, not the top level wrapper block
Disclaimer:
As I mentioned above, I wasn't able to test this fully. This answer is "you might find something like this helpful" rather than "I have fully and completely solved your problem, please copy+paste+deploy".
<form action="next2.php" method="post">
<div class="input_fields_wrap">
<button class="add_field_button">Add Author</button>
<div><input type="text" name="myAuthorText[]"></div>
</div>
</form>
<style>
.author_wrap button,
.author_wrap input {
margin-left: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var author_wrapper = $(".author_wrap"); // Author's book fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var add_subButton = $(".add_sub_field_button"); //Add sub button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="author_wrap"><input type="text" name="myAuthorText[]"/>Remove<br/><button class="add_sub_field_button">Add Author Books</button><div><input type="text" name="myBooksText[]"></div></div>'); //add input box
}
});
$(add_subButton).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(author_wrapper).append('<div><input type="text" name="myBooksText[]"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
Note: I took the liberty of replacing the depracated language attribute on the script tags with type='text/javascript'