объединить var и <tr>в jquery, чтобы все находились в одной строке

Question

Я добавил javascript, jquery внизу моей блейд-страницы, чтобы позволить мне добавить новую строку, содержащую всю таблицу с id = "dynamic_field". (Но без имени кнопки "add" после второй, это должно бытькрестик для удаления) И мой вопрос: как я могу поместить все эти строки в $ ('# dynamic_field'). append (.... здесь ....), потому что я пытаюсь скопировать вставить и каждый раз возникает синтаксическая ошибка..

вот файл блейда:

@extends ('layout.layout')

@section('containerContent')



<div class="col-md-12">
    <form  method="POST" enctype="multipart/form-data" id="add_tour">
        {{ csrf_field() }}
        @if (count($errors))
            <div class="form-group">
                <div class="alert alert-danger">
                    <ul>
                        @foreach($errors->all() as $error)
                            <li> {{  $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif
        <div class="content">
            <h1>Create a new Tour:</h1>
                <div class="form-group">
                    <div class="col-lg-6">
                        <input class="form-control" type="text" name="tourLabel" placeholder="Tour label">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-6">
                        <textarea class="form-control" placeholder="Resume of tour" name="tourResume"  rows="3"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-6">
                        <select id='nameArtist' name='nameArtist'>
                            <option value=''>Select Music Artist or Band</option>
                            @foreach ($artists  as  $artist)
                                <option  value="{{ $artist->id }}">{{ $artist->artist_name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            <h2 align="center">Add Concert to your Tour:</h2>
            <div class="table-responsive">
                <table class="table table-bordered" id="dynamic_field">
                    <tr>
                    <td><select id='concertRoom' name='concertRoom'>
                        <option>Select your concert room</option>
                        @foreach ($roomsconcert  as  $room)
                            <option  value="{{ $room->id }}">{{ $room->name }}</option>
                        @endforeach
                        </select>
                        </td>
                        <td><input class="form-control" type="date" name="dateConcert"{{ Form::datetime('') }}></td>
                        <td><input class="form-control" type="text" name="concertDuration" placeholder="Duration of the event (min)"></td>
                        <td><button type="button" name="add" id="add" class="btn btn-success">Add More concert</button></td>
                    </tr>
                </table>
            </div>
                <a class="btn btn-primary" href="{{route('show-tour') }}" > Back </a>
                <button class="btn btn-success" type="submit"> {{ 'Submit' }}</button>
        </div>
    </form>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        var i = 1;
        $('#add').click(function() {
                i++;
                var htmlContent = $('#dynamic_field').html();
/*
                $('#dynamic_field').append(htmlContent);
*/

            $('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');


        });

                $(document).on('click','.btn_remove',function () {
                    var button_id = $(this).attr("id");
                    $('#row'+button_id+'').remove();
                });

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });


    });
</script>
@endsection

спасибо

Answer 1

Попробуйте обернуть свой javascript директивой @ дословно

@verbatim
    <script type="text/javascript">
    ......
    </script>
@endverbatim