Multi dropdowns populated from api's

Multi dropdowns populated from api's

Hi,

I have a basic form that has a dropdown which is populated from an api with the following function

  1.  <!-- get categories -->
        <script>
            var sel = $('#Categories');
            var api_url = 'https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx;
            jQuery.get(api_url, function (data) {
                $(data).each(function (key, val) {
                    console.log(key);
                    sel.append($("<option>").attr('value', val[1]).text(val[1]));
            });
            }, 'json');

The form is working perfectly. 

Question is, what would I need to change if I wanted to add a second dropdown populating from a different api?

Ive tried this

  1.     <!-- get subcategories -->
        <script>
            var sel = $('#SubCategories');
            var api_url = 'https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
            jQuery.get(api_url, function (data) {
                $(data).each(function (key, val) {
                    console.log(key);
                    sel.append($("<option>").attr('value', val[1]).text(val[1]));
                });
            }, 'json');
  2.     </script>

but 1st dropdown is not populating with anything & 2nd dropdown now has list items for both api's

Form code is

  1. <form>
                        <div class="form-group">
                            <label for="exampleFormControlSelect1">Category</label>
                            <select class="form-control" id="Categories">
                                <option>Select Category</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="exampleFormControlSelect2">Sub Category</label>
                            <select class="form-control" id="SubCategories">
                                <option>Select Sub Category</option>
                            </select>
                        </div>
                    </form>

Any idea where I might be going wrong please.

Thanks in advance

Todd