I created a fiddle for you that works and added the click handlers for the script:
$('.addtext, .adddate, .addradio').click(function() {
addElement($(this));
});
Domanda
Notice: Before starting to explain, just let me point this out: This isn't a duplicated topic, this one is about insertAfter, not appendTo, and I still couldn't make it.
What's the deal?
When I click on Radio Button it clones a paragraph containing 1 input type text, 1 input type radio and 2 buttons (1 to add, and the other to remove the whole paragraph) Can you guys help me making this add button working?
What's supposed to do? It's supposed to add 1 radio immediately after the first input radio of it's paragraph
Fiddle here Thank you Arun P Johny
Ok, here's the thing
HTML
<input type="text" class="teste">
<!--Input text-->
<p class="text"><br><input type="text" placeholder="Question Name"><br><input type="text" value="User Answer" disabled><button onclick="remove_element(this)">Remove</button></p>
<!--Input date-->
<p class="date"><br><input type="text" placeholder="Question Name"><br><input type="date" disabled><button onclick="remove_element(this)">Remove</button></p>
<!--Input Radio-->
<p class="radio"><br><input type="text" placeholder="Question Name"><br><input class="radio_option" type="radio"><input type="text"><button onclick="addOption(this)">+</button><br><button onclick="remove_element(this)">Remove</button></p>
<p>Select a field to add</p>
<button type="text" class="addtext" onclick="addElement(this)">Textbox</button>
<button type="date" class="adddate" onclick="addElement(this)">Date</button>
<button type="radio" class="addradio" onclick="addElement(this)">Radio Button</button>
<div id="create_form"></div>
Style
<style>
.teste{
display:none;
}
.text{
display:none;
}
.date{
display:none;
}
.radio{
display:none;
}
</style>
It's just setting its display to hide it
jQuery
function addElement(element){
var type = $(element).attr("type");
$("."+ type + ":first").clone().appendTo("#create_form");
$("."+ type + ":last").toggle();
};
function remove_element(input){
$(input).parent().remove();
};
function addOption(element){
$(".teste:first").clone().appendTo($(element).parent().find("input:last"));
$(".teste:last").toggle();
};
Soluzione
I created a fiddle for you that works and added the click handlers for the script:
$('.addtext, .adddate, .addradio').click(function() {
addElement($(this));
});