Difficulty in selecting the checkbox by the user

Question

With jQuery in a loop, I display the list of networks as follows

        var networks;
        window.addEventListener('networksEvent' , event => {
            networks = event.detail.networks;
            $.each(networks, function( index, network ) {
                $('#networlist').append('<div class="custom-control custom-control-sm custom-radio">'+
                   '<input type="radio" class="custom-control-input" id="'+network.id+'">'+
                    '<label class="custom-control-label" for="'+network.id+'">'+network.name+'</label>'+
            '</div>');
            });
        });

(i Send data to this page via dispatchBrowserEvent‍ in livewire)

But the problem is that the user should be able to select a checkbox, but after selecting another previous checkbox is still selected

what is problem?

Answer 1

This is happening because you are not passing name attribute on the input field. Try following:

var networks;
window.addEventListener('networksEvent' , event => {
    networks = event.detail.networks;
    $.each(networks, function( index, network ) {
        $('#networlist').append('<div class="custom-control custom-control-sm custom-radio">'+
            '<input type="radio" name="network" class="custom-control-input" id="'+network.id+'">'+
            '<label class="custom-control-label" for="'+network.id+'">'+network.name+'</label>'+
    '</div>');
    });
});