Можно ли записать Javascript в файл .edge?

Я только начал изучать Adonis.js и хотел бы знать, можно ли написать Javascript в файле .edge? Я нашел этот учебник (здесь) о том, как динамически добавлять строку таблицы, и я хочу реализовать это в моем проекте Adonis.js. Я добавил кодировку в тег <script>, но ничего не произошло, когда я нажал кнопку «Добавить». Кто-нибудь знает, как с этим разобраться? Или даже есть другое решение по этому поводу?

Заранее благодарю за помощь.

@layout('main')

@section('content')
    <a href = "/">Go back</a>
    <hr>

    <h1>Create Club</h1>

    <form action = "/clubs/create" method = "POST">

        {{ csrfField() }}

        <div class = "form-group">
            <label>Club Name</label>
            <input type = "text" name = "clubName" class = "form-control" value = "{{ old('clubName', '') }}">
            {{ elIf('<span class = "text-danger">$self</span>', getErrorFor('clubName'), hasErrorFor('clubName')) }}
        </div>

        <div class = "form-group">
                <label>Club Description</label>
                <textarea name = "clubDesc" class = "form-control">{{ old('clubDesc', '') }}</textarea>
                {{ elIf('<span class = "text-danger">$self</span>', getErrorFor('clubDesc'), hasErrorFor('clubDesc')) }}
        </div>

        <br>

        <table class = "table order-list">
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Position</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type = "text" name = "memberName" class = "form-control"/>
                    </td>
                    <td>
                            <input type = "text" name = "position" class = "form-control"/>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan = "5" style = "text-align: left;">
                        <input type = "button" class = "btn btn-sm btn-block" id = "addrow" value = "Add Member"/>
                    </td>
                </tr>
            </tfoot>
        </table>

        <button class = "btn btn-primary" type = "submit">Create!</button>

    </form>

    <script>
        $(document).ready(function () {
            var counter = 0;

            $("#addrow").on("click", function () {
                var newRow = $("<tr>");
                var cols = "";

                cols += '<td><input type = "text" class = "form-control" name = "memberName' + counter + '"/></td>';
                cols += '<td><input type = "text" class = "form-control" name = "position' + counter + '"/></td>';

                cols += '<td><input type = "button" class = "ibtnDel btn btn-md btn-danger "  value = "Delete"></td>';
                newRow.append(cols);
                $("table.order-list").append(newRow);
                counter++;
            });

            $("table.order-list").on("click", ".ibtnDel", function (event) {
                $(this).closest("tr").remove();       
                counter -= 1
            });

        });

        function calculateRow(row) {
            var price = +row.find('input[name^ = "price"]').val();
        }

        function calculateGrandTotal() {
            var grandTotal = 0;
            $("table.order-list").find('input[name^ = "price"]').each(function () {
                grandTotal += +$(this).val();
            });
            $("#grandtotal").text(grandTotal.toFixed(2));
        }
    </script>

@endsection