innerHTML not working for select tag when i want to change new options

html code:

<div class="row clearfix">
  <div class="col-sm-12">
    <div class="form-group">
      <select id="domain" class="form-control show-tick" onchange="myFunction1()">
        {% for item in domains %}
        <option value=" {{item.0}} ">{{item.1}}</option>
        {% endfor %}
      </select>
    </div>
  </div>
</div>
<div class="row clearfix">
  <div class="col-sm-12">
    <div class="form-group">
      <select id="2">
        <option></option>
      </select>
    </div>
  </div>
</div>

js function:

<script>
  function myFunction1() {
    x = document.getElementById("domain").value;
    document.getElementById("2").innerHTML += "<OPTION>1</OPTION>";
    alert(x);
  }
</script>

I am trying to change the drop-down box with id set as 2 when an on-change function is called in other drop-down box. Code looks good but i cant see the new options added.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum