function addMaterialAndQuantity() {
    var materialId = $('#MaterialId').val();
    var materialText = $('#MaterialId option:selected').map(function () { return $(this).text(); }).get().join(', ');
    var quantity = $('#QuantityInput').val();

    if (materialId && quantity) {
        var html = '<div class="alert alert-info alert-dismissible fade show" role="alert">';
        html += '<strong>' + materialText + '</strong> - Quantity: ' + quantity;
        html += '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>';
        html += '</div>';
        $('#materialList').append(html);

        materialId.forEach(id => {
            var hiddenField = '<input type="hidden" name="MaterialQuantities.Index" value="' + id + '" />';
            hiddenField += '<input type="hidden" name="MaterialQuantities[' + id + '].MaterialId" value="' + id + '" />';
            hiddenField += '<input type="hidden" name="MaterialQuantities[' + id + '].Quantity" value="' + quantity + '" />';
            $('#hiddenFields').append(hiddenField);
        });

        $('#MaterialId').val('').trigger('change');
        $('#QuantityInput').val('');
    }
}