Javascript 连接var和<；tr>；在jquery中，将所有数据都放在同一行中

我在我的blade页面的底部添加了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

@extends（'layout.layout'））
@节（“集装箱内容”）
{{csrf_field（）}}
@如果（计数（$errors））

@foreach（$errors->all（）作为$error）
{{$error}}
@endforeach

@恩迪夫
创建新巡更：
选择音乐艺术家或乐队
@foreach（$artists as$artist）
{{$artist->artist_name}
@endforeach
将音乐会添加到您的巡演中：
选择你的音乐厅
@foreach（$rooms计入$room）
{{$room->name}
@endforeach
添加更多音乐会
{{‘提交}}
$（文档）.ready（函数（）{
var i=1；
$（'#添加'）。单击（函数（）{
i++；
var htmlContent=$（“#动态_字段”）.html（）；
/*
$（“#动态_字段”）.append（htmlContent）；
*/
$（“#动态_字段”）.append（'X'）；
});
$（文档）.on（'click'，'btn_remove'，函数（）{
var按钮_id=$（this.attr（“id”）；
$（“#行”+按钮id+”）.remove（）；
});
$.ajaxSetup({
标题：{
'X-CSRF-TOKEN'：$（'meta[name=“CSRF-TOKEN”]）.attr（'content'））
}
});
});
@端部

---

谢谢

尝试用

@逐字逐句
......
@逐字结束

您好，有人知道吗？@bruno您收到的语法错误消息是什么？当您单击按钮或加载页面时会发生这种情况吗？

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