In the code, when I click Add Details button, I get the #hide_subject_module.
This will append. Inside that, I call another dynamic field. When I click the plus button, the #hide_detail_module does not append. And I want to save multiple data to Db. Anyone give me a suggestion?
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".input_fields_wrap");
var addField = $("#hide_subject_module");
var x = 1;
$("#add_field_button").click(function(e) {
e.preventDefault();
if (x <= max_fields) {
x++;
document.getElementById('hide_subject_module').style.display = "block";
$(wrapper).append(addField);
} else
alert("Maximum subject fields achieved.")
});
$(wrapper).on("click", "#remove_field", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
$(document).ready(function() {
var wrap = $(".input_detail_fields_wrap");
var add_detail_button = $("#add_detail_button");
var addDetailField = $("#hide_detail_module");
var y = 1;
$(add_detail_button).click(function(u) {
u.preventDefault(); {
y++;
document.getElementById('hide_detail_module').style.display = "block";
$(wrap).append(addDetailField);
}
});
$(wrap).on("click", "#remove_detail_field", function(u) {
u.preventDefault();
$(this).parent('div').remove();
y--;
})
});
<button id="add_field_button" class="btn btn-default" onclick="subjectmodule()">Add Module</button>
<div class="input_fields_wrap">
</div>
<div id="hide_subject_module" style="display:none;">
<div class="input_fields_wrap">
<%=f ields_for :subject_module do |a| %>
<div class="col-xs-3">
<%=a .text_field :module_number, class: "form-control", :placeholder=>"Number", :maxlength => 5 %>
</div>
<div class="col-xs-9">
<%=a .text_field :module_name, class: "form-control", :placeholder=>"Module Name", :maxlength => 25 %>
</div>
<% end %>
<%=f ields_for :module_detail do |b| %>
<div class="col-xs-3">
<%=b .text_field :module_detail_number, class: "form-control", :placeholder=>"No", :maxlength => 5 %>
</div>
<div class="col-xs-8">
<%=b .text_field :description, class: "form-control", :placeholder=>"Description", :maxlength => 25 %>
</div>
<button id="add_detail_button" class="btn btn-default" onclick="ModuleDetail()"><i class="fa fa-plus"></i>
</button>
<br />
<div class="input_detail_fields_wrap">
</div>
<% end %>
</div>
<div id="remove_field" align="center">
<a href="#" class="btn btn-default">Remove</a>
</div>
</div>
<div id="hide_detail_module" style="display:none;">
<%=f ields_for :module_detail do |b| %>
<div class="col-xs-3">
<%=b .text_field :module_detail_number, class: "form-control", :placeholder=>"No", :maxlength => 5 %>
</div>
<div class="col-xs-8">
<%=b .text_field :description, class: "form-control", :placeholder=>"Description", :maxlength => 25 %>
</div>
<a href="#" id="remove_detail_field" class="btn btn-default"><i class="fa fa-minus"></i></a>
<% end %>
</div>
