Laravel – Semantic UI dropdown from ajax call back is not getting initialized after ajax success

I am using Semantic UI dropdown and DataTables in a Laravel controller function. I am sending an ajax request to a route and receive JSON data (containing a table row) with one of the keys (columns) containing HTML. The HTML contains a Semantic UI dropdown which is not getting initialized after the Ajax completes. I can confirm the DOM is loaded and I am able to manipulate the DOM elements with jQuery (using .hide() for example) from ajax success callback, and can initialize the DataTable on the page (which runs after the Dropdown initialization in the ajax success callback function).

I have created a JSfiddle with nearly an identical ajax request and it works as expected: JSFiddle.

In the JSFiddle, the ajax request gets the JSON data with a key in the row containing the select dropdown HTML. The HTML is then appended to the table’s tbody and both, the Dropdown as well as the DataTable table, are both getting initialized.

This is the ajax call in JSFiddle:

$.ajax({
    url: "/echo/json/",
        type: 'POST',
    dataType: 'json',
        data: {
            json:'[{"name":"Stuart Little","country":"Argentina","html":"<select id= 'someId_1' name='someName_1' multiple='' class='ui dropdown multiple fluid scrolling clearable search remote selection '><option>- Select One -</option><option value='1'>Option 1</option></select>"},{"name":"Tes Ter","country":"Canada","html":"<select id= 'someId_2' name='someName_2' multiple='' class='ui dropdown multiple fluid scrolling clearable search remote selection '><option>- Select One -</option><option value='1'>Option 1</option></select>"}]'
        },
    success: function (response) {
            $('.waiting').hide();
             response.forEach(function (item, index, data) {
                    var o = '';
                    o += '<tr>';
                    o += '<td>' + item.name + '</td>';
                    o += '<td>'+item.country+'</td>';
                    o += '<td>';
                    o += '<div id="someDiv_'+index+'" class="w-100">';
                    o += '<div class="w-100">';
                    o += item.html;
                    o += '</div>';
                    o += '</div>';
                    o += '</td>';
                    o += '</tr>';
                    $('#table tbody').append(o);
                    $('#table').DataTable();
                    $('.ui.dropdown') .dropdown();
            }); 
        }
});

Here is the ajax request in the Laravel app:

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
    }
});
$.ajax({
    url : "{{ route('settings.table', ['app_id' => 1]) }}",
    type: 'POST',
    dataType: 'json',
    success: function (response) {
            var arr = response['data'];
            arr.forEach(function (item, index, arr) {
                    var o = '';
                    o += '<tr>';
                    o += '<td>'+item.company_name+'</td>';
                    o += '<td>'+item.name+'</td>';
                    o += '<td>'+item.email+'</td>';
                    o += '<td>';
                    o += '<div class="w-100">';
                    o += item.html;
                    o += '</div>';
                    o += '</td>';
                    o += '</tr>';
                    $('#table tbody').append(o);
                    $('#table').DataTable();
                    $('.ui.dropdown').dropdown();
            });
        }
});

In my Laravel application, however, the dropdown is not getting initialized, only the DataTable table is. I am not getting any errors in console.

I tried a static select dropdown (instead of a dynamic one from the Ajax call) and it gets initialized at page load without issues. This is how I am using the dropdowns in other pages, but in this case, the page takes too long to load, so I need to load the page first and then build the table and dropdowns after the page loads.

As mentioned the static select gets initialized at page load, but it also gets initialized in the ajax success function without a problem. Only the DOM elements that were created by the ajax callback (dynamically) are not initializing.

Thank you.