I want to bind the second drop-down based on first drop-down’s selected option.

https://i.sstatic.net/f5B9GVx6.png

Also when add second dropdown first selected system should bi disabled.

https://i.sstatic.net/rEA9Ftek.png

Html for drop-down is as below:

 var logintypeList = Model.LoginTypeList
.
.
.
.
 <div class="form-group row">
    <div class="col-12">
        <label for="firstName">Login System and Type</label>
        @Html.DropDownListFor(m => m.LoginTypeIds, new SelectList(Model.LoginTypeList, "Id", "Name"), new { @class = "form-control chosen-select assign-system-login-type", multiple = "multiple" , @value = Model.LoginTypeIds})
    </div>

</div>  

In Js I had bind login type drop-down on select of system type. But it works only for first time, I want this solution for after adding multiple drop-downs:

$(document).ready(function () {
    initializeSelect2();
});

function initializeSelect2() {
    $('select.addTags, select.addSystem').select2({
        width: '100%',
        maximumInputLength: 20
    });
}
$('.assign-system-login-type').on('select2:select', function (e) {
    $(".addTags").empty()
    var logintypeList = @Html.Raw(Json.Serialize(logintypeList));
    var optionno = 0;
    $(logintypeList).each(function (index) {
        if (e.params.data.id == this.systemType) {
            var $newOption = $("<option selected='selected'></option>").val(index).text(this.name)
            $(".addTags").append($newOption).trigger('change');
            optionno = optionno + 1;
        }
    });
    if (optionno == 0) {
        var $newOption = $("<option selected='selected'></option>").val("").text("No Options")
        $(".addTags").append($newOption).trigger('change'); 
    }
});