title: In this code when I select provinces it appears all cities in the province thats the problem how I fix this? using javascript only
body: <p><strong>html</strong></p>
  <pre><code>&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
      &lt;title&gt;Farhan&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;!--Create select with province list--&gt;
  &lt;select id=&quot;province&quot;&gt;
      &lt;option value=&quot;&quot;&gt;Select Province&lt;/option&gt;
      &lt;option value=&quot;Sindh&quot;&gt;Sindh&lt;/option&gt;
      &lt;option value=&quot;Punjab&quot;&gt;Punjab&lt;/option&gt;
      &lt;option value=&quot;Balochistan&quot;&gt;Balochistan&lt;/option&gt;
      &lt;option value=&quot;Khyber Pakhtunkhwa&quot;&gt;Khyber Pakhtunkhwa&lt;/option&gt;
      &lt;option value=&quot;Gilgit-Baltistan&quot;&gt;Gilgit-Baltistan&lt;/option&gt;
  &lt;/select&gt;
  &lt;!--Create select with city list--&gt;
  &lt;select id=&quot;city&quot;&gt;
      &lt;option value=&quot;&quot;&gt;Select City&lt;/option&gt;
  &lt;/select&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  <p>As you can see when I select province it appears all the cities in an array means ,when I select Sindh then it select right cities but when I select Punjab it select cities of Punjab but cities of Karachi also visible they are not disappearing.</p>
  <pre><code>&lt;script type=&quot;application/javascript&quot;&gt;
      console.log(&quot;Hello World&quot;);
      //Create javascript object with pakistan provinces
      let pakistan = {
          &quot;Sindh&quot;: [
              {&quot;Karachi&quot; : [&quot;Korangi&quot;, &quot;Kotli&quot;, &quot;Shah Faisal&quot;]},
              {&quot;Hyderabad&quot; : [&quot;Korangi&quot;, &quot;Kotli&quot;, &quot;Shah Faisal&quot;]},
          ],
          &quot;Punjab&quot;: [
              {&quot;Lahore&quot; : [&quot;Korangi&quot;, &quot;Kotli&quot;, &quot;Shah Faisal&quot;]},
              {&quot;Islamabad&quot; : [&quot;Korangi&quot;, &quot;Kotli&quot;, &quot;Shah Faisal&quot;]},
              {&quot;Faisalabad&quot; : [&quot;Korangi&quot;, &quot;Kotli&quot;, &quot;Shah Faisal&quot;]}
          ],
          &quot;Balochistan&quot;: [
              {&quot;Quetta&quot; : [&quot;Korangi&quot;, &quot;Kotli&quot;, &quot;Shah Faisal&quot;]},
              {&quot;Sibi&quot; : [&quot;Korangi&quot;, &quot;Kotli&quot;, &quot;Shah Faisal&quot;]},
              {&quot;Karakoram&quot; : [&quot;Korangi&quot;, &quot;Kotli&quot;, &quot;Shah Faisal&quot;]}
          ],
          &quot;Khyber Pakhtunkhwa&quot;: [
              {&quot;Peshawar&quot; : [&quot;Korangi&quot;, &quot;Kotli&quot;, &quot;Shah Faisal&quot;]},
              {&quot;Mardan&quot; : [&quot;Korangi&quot;, &quot;Kotli&quot;, &quot;Shah Faisal&quot;]},
              {&quot;Kohat&quot; : [&quot;Korangi&quot;, &quot;Kotli&quot;, &quot;Shah Faisal&quot;]}
          ],
          &quot;Gilgit-Baltistan&quot;: [
              {&quot;Kundian&quot; : [&quot;Korangi&quot;, &quot;Kotli&quot;, &quot;Shah Faisal&quot;]}
          ]
      };
      //On change of province display cities in console
       document.getElementById(&quot;province&quot;).onchange = function () {
              let cities = pakistan[this.value];
              console.log(cities);
              cities.forEach(function (city) {
              let currentCity = Object.keys(city)[0];
              //Create option element for cities and append to select element
              let option = document.createElement(&quot;option&quot;);
              option.value = currentCity;
              option.innerText = currentCity;
              
              document.getElementById(&quot;city&quot;).appendChild(option);
          });
      };
  &lt;/script&gt;
  </code></pre>