Modal does not show when clicking input

I’m trying to open a modal when the user clicks a input field.

This is a PWA that will run inside a Flutter wrapper.

Parent HTML page:

<!-- abbreviated -->
<div class="form-row">
    <div class="form-group col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">

        <label>@T("Summary of evaluation")</label>
            <input type="text" id="input_summary" data-field="LessonsLearned">
            @Render("Block", ID: "Modal")
    </div> 
</div>

The @Render("Block", ID: "Modal") is Razer syntax, calling the Modal HTML block.
Which you can see below.

<div id="modal" class="modal show" data-target="#modal" data-toggle="modal" role="dialog"
    style="position: fixed; top: 0; display: none;">
    <div class="modal-content" tabindex="-1" 
        style="position: asbsolute; top: 0; left: 0; right: 0; bottom: 0; display: block;">
        <p id="modal_text"></p>
    </div>
</div>

<script>

    $(document).ready(function() {

        // When the input field is clicked, open the modal
        $("#input_summary").click(function() {

            // Print a message to the console
            console.log("Input field clicked");

            // Get the value of the input field
            var inputText = $("#input_summary").val();

            // Set the text of the modal and show it
            $("#modal_text").text(inputText);
            $("#modal") .css({ position: "fixed", zIndex: 9999, display: "block", top: 0, left: 0, right: 0 })
                        .appendTo("#input_summary")
                        .show(

                            function() {
                                // Print a message to the console
                                console.log("Modal shown");

                                // This function is called when the modal is shown
                                $("#modal").addClass("show");
                            }
                        );

            // When the modal is closed, hide it
            $("#modal").on("hidden.bs.modal", function() {
                
                // Print a message to the console
                console.log("Modal hidden");

                $("#modal").hide(

                    function() {
                        // This function is called when the modal is hidden
                        $("#modal").removeClass("show");
                    }
                );
            });
        });
    });
</script>

The two first console.log are written to console successfully, but no modal is shown.