Javascript doesn't update form select with option : I have a small problem, I have 4 separate drop downs, I want to add an option to the drop down using javascript, on my working code (php constructs the dropdowns initially with value from MySQL) question_type and question_subtype work, however option_type option_subtype do not. 
However, it works fine on jsfiddle. https://jsfiddle.net/aeqsdzpk/2/

There are no errors when I look at the console. 

Two are working just fine, 

    <select name="question_type" id="question_type">
      <option value="1">1</option>
      <option value="2">2  </option> 
      <option value="3">3</option>
      <option value="4">4</option>
    </select>

    <select name="question_subtype" id="question_subtype">
      <option value="A">A</option>
      <option value="B">B  </option> 
      <option value="C">C</option>
      <option value="D">D</option>
    </select>

    <select name="option_type[]" id="option_type">
      <option value="opt-1">opt1</option>
      <option value="opt-2">opt2  </option> 
      <option value="opt-3">opt3</option>
      <option value="opt-4">opt4</option>
    </select>

    <select name="option_subtype[]" id="option_subtype">
      <option value="optA">optA</option>
      <option value="optB">optB  </option> 
      <option value="optC">optC</option>
      <option value="optD">optD</option>
    </select>


The Javascript I'm using is here:

     function addOption()
      {
       var opt = document.getElementById('options').value,
       new_option  = document.getElementById('new_option').value,
       option = document.createElement("option"),
       x = document.getElementById(opt);
       alert(opt);
      option.text = new_option;
       x.add(option);
      document.getElementById('options').style.display='none';
     document.getElementById('new_option').value='';
     }





