I am working on a form that includes a button and an input field. When the user clicks on the button "ADD MORE FIELDS," I want to dynamically generate a new input box. Although I have tried using code from this jsfiddle link and it works, my goal is to achieve a layout similar to this image:
https://i.stack.imgur.com/FFR7V.png
In order to position the input fields as shown in the picture: - If only one box is added in a row, its width should be set to 200px. - If two boxes are added in a row, each box should have a width of 100px. - As illustrated on the right side of the image, there should be an option to remove a box by clicking on it. After removing a box, all remaining boxes should be realigned accordingly (e.g., when box 3 is removed, box 4 takes its place, box 6 becomes smaller, and box 5 moves to the left).
Although I attempted the code provided in the following jsfiddle, I believe additional CSS and jQuery modifications are necessary:
$(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 x = 1; //initial 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="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
Thank you!