Add new fields to a form with JavaScript

1- I have a form where users can buy t-shirts. They can select quantity, size, color, and other fields. 2- You need to convert all the existing fields into input:hidden. 3- You need to recreate the form but duplicating each field for each color available. For example, if the colors <select> has 4 colors: white, black, green, red. You will create 4 fields for quantity, 4 fields for size, etc. Sometimes the form will have additional fields, so you have to duplicate all the fields visible automatically. 4- When the duplicated fields are filled, you will save the values in the original fields (input:hidden) in this format: Example for "quantity" field: blue: 4; green: 2; white: 1; black: 5; 5- The form is too big. So we will split the form in steps, 2 fields per step. When the users click the "next" button, you will hide the current fields and display the next fields. You can use a slider / tabs jquery plugin for this. Please start your bid with "Hola Jose" so I know you read this. Also check the attached images. You will work on this page: [login to view URL]