second dropdown not functioning well.

Question

I'm designing a currency converter application and i'm fetching the currencies in the world and putting them in a tag on the fly. I have two dropdowns one for the currency one is converting from and the second for the currency being converted to. I already have the "FROM" part working but the "TO" part is giving me a lot of troubles. Here is my code below:

 
 $(document).ready(function() {
 
 let optFrom = document.getElementById('from');
  let optTo = document.getElementById('to');
  
  const url = 'https://free.currencyconverterapi.com/api/v5/countries';
  
  

  
 fetch(url, {
        method:'GET',
        mode:'cors',
        redirect: 'follow',
        headers : new Headers({
          'Content-Type':'application/json',
          'Accept':'application/json, text/plain'
        })
   }).then(response => {
    if (response.status !== 200){
        console.log("There seems to be a problem");
        return;
      }
   //const cacheRes = response.json();
    return response.json();
  })
 .then(results => {
   let cacheRes = results;
   for (const result in cacheRes){
        for (const sm in cacheRes[result]){
          optFrom.innerHTML+= `<option value='${cacheRes[result][sm]["name"]}'>${cacheRes[result][sm]["currencyId"]}</option>`
         
        }
      }
   let smart = results;
   for (const resu in smart){
        for (const sm in smart[resu]){
          optTo.innerHTML+= `<option value='${smart[resu][sm]["name"]}'>${smart[resu][sm]["currencyId"]}</option>`
         
        }
      }
   
   
   
 })
 .catch(err => console.log("something went wrong"));
 
 
 });
 

.container-fluid{
  background: rgba(0,0,0,0.5);
}
.row#eins{
  margin: 65px auto;
}

.row#zwei{
  margin: 65px auto;
}

h4{
  margin-left:239px;
  color: #eeeeee;
}

.ht{
  height: auto;
  text-align: center;
}

.ms{
  height: 100px;
  border: 1px solid white;
}

#fro > p{
  margin-top:35px;
}

input[type="number"]{
  height: 70px;
  margin-top: 17px;
  /*border:none;*/
  font-size:18px;
  text-align: center;
  margin-left: -7px;
  
}

#to, #too{
  background:white;
}

#convert{
  text-align:center;
}

<div class="container-fluid">
  <!--main starts-->
  <div class="row" id="main">
    <!--row one-->
    <div class="row" id="eins">
      <h4>From</h4>
      <div class="col-sm-3 ht"></div>
      <div class="col-sm-3 ht ms" id="fro1">
        <select id="from"  onchange="convertCurrency">
          <option value="...">...</option>
        </select>
      </div>
      <div class="col-sm-3 ht ms" id="to">
        <input type="number" id="number1" name="value1">
      </div>
      <div class="col-sm-3 ht"></div>
    </div><!--row one ends-->
    
    <!--row two-->
    <div class="row" id="zwei">
      <h4>To</h4>
      <div class="col-sm-3 ht"></div>
      <div class="col-sm-3 ht ms" id="fro2">
        <select id="to"  onchange="convertCurrency">
          <option value="...">...</option>
        </select>
      </div>
      <div class="col-sm-3 ht ms" id="too">
        <input type="number" id="number2" name="value2">
      </div>
      <div class="col-sm-3 ht"></div>
    </div><!--row two ends-->
    
    </div><br><!--main ends-->
  <div id="convert">
    <button type="button" class="btn btn-lg">Convert</button>
  </div><br><br>
  </div><br><br>
</div>

Answer 1

Duplicate ids "to"

change

  <div class="col-sm-3 ht ms" id="to">
    <input type="number" id="number1" name="value1">
  </div>

to

  <div class="col-sm-3 ht ms" id="to1">
    <input type="number" id="number1" name="value1">
  </div>

Answer 2

You have two times an element with ID "to". So it will always select the div and add all in it:

<div class="col-sm-3 ht ms" id="to">
    <input type="number" id="number1" name="value1">
</div>

Change the id of div or the id of Select. And it will work. If you change Select you need to change also the selector:

For example you can change to:

<select id="toSelect"  onchange="convertCurrency">
      <option value="...">...</option>
    </select>

let optTo = document.getElementById('toSelect');

Cheers,