Show Selected Checkbox Text In A Drop Down Button

I want to show the selected checkbox's text inside the button, right now when i select something from the checkbox it only shows the text 'Multiple Selection ▼'

, function() { let multi_text = ""; $("ul.dropdown-menu input[type=checkbox]").each(function() { if ($(this).is(":checked")) { multi_text += $(this).val() + " "; } else {} if (multi_text !== '') { $(".form-control").text(multi_text); } else { $(".form-control").text("Multiple Selection ▼"); } }); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

<div class="dropdown show">

    <button style="border-radius: 10px; border-width: 2px; border-color: #fcb141" type="button" class="form-control" data-toggle="dropdown">Multiple Selection ▼</button>
    <ul class="dropdown-menu checkbox-menu allow-focus">

        <li><a style="color: black;" href="#" class="large" data-value="Chinese" tabIndex="-1">
                <input name="languages[]" value="Chinese" type="checkbox" />&nbsp;Chinese</a>
        </li>

        <li><a style="color: black;" href="#" class="large" data-value="English" tabIndex="-1">
                <input name="languages[]" value="English" type="checkbox" />&nbsp;English</a>
        </li>

        <li><a style="color: black;" href="#" class="large" data-value="French" tabIndex="-1">
                <input name="languages[]" value="French" type="checkbox" />&nbsp;French</a>
        </li>

        <li><a style="color: black;" href="#" class="large" data-value="German" tabIndex="-1">
                <input name="languages[]" value="German" type="checkbox" />&nbsp;German</a>
        </li>

        <li><a style="color: black;" href="#" class="large" data-value="Italian" tabIndex="-1">
                <input name="languages[]" value="Italian" type="checkbox" />&nbsp;Italian</a>
        </li>

        <li><a style="color: black;" href="#" class="large" data-value="Malay" tabIndex="-1">
                <input name="languages[]" value="Malay" type="checkbox" />&nbsp;Malay</a>
        </li>

        <li><a style="color: black;" href="#" class="large" data-value="Spanish" tabIndex="-1">
                <input name="languages[]" value="Spanish" type="checkbox" />&nbsp;Spanish</a>
        </li>

    </ul>

</div>