im new to javascript, im trying to duplicate 2 "drop down option" fields when the user clicks the "add another" button. The code i found below actually and tweak works when i isolate it like i've done here, but when i insert into the form, it just bounces back to the top of the page. Not sure if anyone has an ideas what this could be. Any ideas or assistance is appreciated.I added a link to the full form on codepen if it helps

var i = 0;
var original = document.getElementById('repeatTHIS');

function repeat() {
  var clone = original.cloneNode(true);
  clone.id = "repeatTHIS1"     i;
  original.parentNode.appendChild(clone);
}

  <div id="repeatTHIS">
            <div class="form-row">
               <div class="form-group col-md-6">
                  <label for="inputState">Subject*</label>
                  <select id="inputState" class="form-control">
                     <option selected>--select--</option>
                     <option>...</option>
                     <option>...</option>
                     <option>...</option>
                     <option>...</option>
                  </select>
               </div>
               <div class="form-group col-md-6">
                  <label for="inputState">Obtained Grade*</label>
                  <select id="inputState" class="form-control">
                     <option selected>--select--</option>
                     <option>N/A</option>
                     <option class="sub-option-titles" disabled>Grading System</option>
                     <option>A</option>
                     <option>A*</option>
                     <option>B</option>
                     <option>C</option>
                     <option>D</option>
                     <option>E</option>
                     <option>F</option>
                     <option>G</option>
                     <option>U</option>
                     <option class="sub-option-titles" disabled>9:1 Grading Structure</option>
                     <option>9</option>
                     <option>8</option>
                     <option>7</option>
                     <option>6</option>
                     <option>5</option>
                     <option>4</option>
                     <option>3</option>
                     <option>2</option>
                     <option>1</option>
                     <option class="sub-option-titles" disabled>BTEC qualifications</option>
                     <option>Level 2 Distinction(BTEC)*</option>
                     <option>Level 2 Distinction(BTEC)</option>
                     <option>Level 2 Merit(BTEC)</option>
                     <option>Level 2 Pass(BTEC)</option>
                     <option>Level 1 Distinction(BTEC)</option>
                     <option>Level 1 Merit(BTEC)</option>
                     <option>Level 1 Pass(BTEC)</option>
                  </select>
               </div>
               </div>
             </div>
              <button type="submit" class="btn btn-danger" id="clone_button" onclick="repeat()">Add Another</button>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

It bounce to the top of the page because you click on the button which send the form.

Replace your button by an input

<input type='button' value='Add another' />

It should works