XML dependent dropdownlist in html-file

Im new to web programming and looking for help making a dropdown list on a html page, from an XML file.

My xml fil:

<data>
 <xmllist>
   <item>Item 1 </item>
   <grp1>59</grp1>
   <grp2>001</grp2>
   <grp3>IT</grp3>
 </xmllist>
 <xmllist>
   <item>Item 2 </item>
   <grp1>59</grp1>
   <grp2>002</grp2>
   <grp3>GH</grp3>
 </xmllist>
 <xmllist>
   <item>Item 3 </item>
   <grp1>59</grp1>
   <grp2>006</grp2>
   <grp3>PI</grp3>
 </xmllist>
</data>

When "item" is selected in the dropdown list, the grp1, grp2 and grp3 data must be loaded in separate fields beneath the dropdown box. I will be using Bootstrap for formating the look of the page.

My code for loading data is:

<script>

        function getData() {

            var url = 'xmlfile';
            var counter = 0;
            var HTMLstring = '<select class="form-control">';
            
              $.ajax({
                type: "GET",
                url: url,
                dataType: "xml",
                cache: false,
                    success: function (xml) {
                    console.log(xml);

                            $(xml).find('xmllist').each(function () {
                                var item = $(this).find('item').text();
                                var grp1 = $(this).find('grp1').text();
                                var grp2 = $(this).find('grp2').text();
                                var grp3 = $(this).find('grp3').text();
                                counter = counter + 1;
                
                HTMLstring += '<option value = "' + counter + '">' + item + '</option>';

                            });
                    },
            complete: function () {
            $('#data-item').html(HTMLstring);
            
            },  
                });
        }

        //=============================================================================
        // jQuery - Ready
        //=============================================================================
        $(document).ready(function ($) {

            // Get data
            getData('');

            
        });
    </script>



<body>



        <!-- Søge felter, vises på html siden -->
        <form class="mb-3 mt-3" onsubmit="getData(''); return false">
            

                <div class="form-inline"></div>
                    <div class="input-group input-group-sm">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Vælg</span>
                        </div>
                        <div id="data-item"></div>
                        

                    </div>
                </div>
            </div>

    

</body>

Thanks for any tips and helps.