add a div with a class of tab every 2 divs with class of form-group

Question

how can I add a div with a class of "tab" every 2 form-group I'm trying to create a step form but page builder is generating the html code. i want to see if I can do it with javascript i want the final result to be like this

UPDATED REQUEST First thank you for the al the answers, thank you for taking the time. but i forgot to add some details im very sorry. ---the whole idea is that my page builder only allows me to create labels and inputs just like the picture i had attached before were it show the form groups. and the main question was how to create tabs every two form groups and i have try all the codes so far one works perfect i will try again the otherones. so the whole idea is that im trying to create a STEP FORM from current form but this builder does not allow me to create tabs ys very limited that why my original question. NOW im having a problem that i did not saw it is that how can i integrate the previus and next button this is the final result i want to achive but i totally forgot to add them, hope i get some help this is the link of what im trying to do. and thanks to all of you im able to create tabs from javascript into HTML, but it looks like im missing some elements LIKE PREVIEW, NEXT BUTTON, and i dont want to display submit button till the end and at the end only submit and previews button should be showing, and also THE STEPS INDICATOR IM MISSING THEM. but i cannot add any of does they have to be add it from javascript. please and thank you. hope all this makes sense. please refer to the W3school sample. https://www.w3schools.com/howto/howto_js_form_steps.asp

CODEenter image description here expanded code enter image description here

enter image description here

Peleg Haham · Answer

Hope I understood correctly. Html

Script

    let formElement = document.getElementById('my-form');
    function generateTabs(times){
        for(let i = 0; i< times i++){
            generateTab();
        }
    }
    function generateTab(){
        let tabDiv = document.createElement('div');
        tabDiv.className = 'tab'
        let formGroupDiv = document.createElement('div');
        formGroupDiv.className = 'form-group';
        let secondformGroupDiv = document.createElement('div');
        formGroupDiv.className = 'form-group';
        tabDiv.appendChild(formGroupDiv);
        tabDiv.appendChild(secondformGroupDiv);
        formElement.appendChild(tabDiv);
        }

WillD · Answer

Yes this can be achieved through JS. Use createElement and appendChild in a loop.

const container = document.querySelector('.container');
const formGroups = document.querySelectorAll('.form-group');

for(let i = 0; i < formGroups.length; i = i +2){
  const div = document.createElement('div');
  div.className = 'tab';
  div.appendChild(formGroups[i]);
  div.appendChild(formGroups[i+1]);
  container.appendChild(div);
}

.tab {
  background: red;
  margin-bottom: 3px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
}

.form-group {
  background: lightblue;
  height: 10px;
}

GrafiCode · Answer

Looping through form children:

const form = document.querySelector('form')
const copy = [...form.children]
let newHTML = ''

while (copy.length > 0) {
  let tmp = document.createElement("div")
  tmp.appendChild(copy.shift())
  tmp.appendChild(copy.shift())  
  newHTML += '' + tmp.innerHTML + ''
}

form.innerHTML = newHTML

.tab {
 border: 1px solid fuchsia;
}


  a
  b
  c
  d
  e
  f
  g
  h
  i
  j

add a div with a class of tab every 2 divs with class of form-group

3 Answers