使用JavaScript在OnClick按钮上添加表行，并保存在Laravel中的数据库中

我正在为用户创建一个表行，以便添加好友详细信息，其中有许多列，如name、mobile。。和三个复选框，当用户点击一个复选框时，与该复选框相关的输入字段打开，用于输入该字段的信息，它可以选择任意数量的复选框，并且它必须显示与该复选框相关的输入字段的数量，用户可以填充该输入字段。 现在，这可以很容易地做到，当用户只有一个朋友的条件，但我想让它的用户，它可以添加多个朋友的详细信息，点击“添加朋友按钮”，但我陷入了如何给id，名称。。。输入字段和复选框，以便当用户单击复选框时，必须打开相关的输入字段，并使用laravel将所有数据保存在数据库中

我只是为一个朋友创建的，如下所示

朋友姓名
朋友手机
业余爱好
关于
歌唱
跳舞
其他

这是通过单击按钮添加新行。您需要包括jquery

<table class="friends-list table table-bordered width100" id="table1">

    <thead>
        <tr class="filters">
          <th>Friend Name</th>
          <th>Friend mobile</th>
          <th>Hobbies </th>
          <th>about</th>
        </tr>
    </thead>



    <tbody>
        <tr role="row">
            <td><input class="form-control" id="name" name="name"></td>
            <td><input class="form-control" id="mobile" name="mobile"></td>

            <td>

                    <div class="col-md-4">
                      <div class="form-group">
                        <div class="checkbox">
                          <label data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                <input type="checkbox"/> Singing
                            </label>
                        </div>
                      </div>
                      <div id="collapseOne" aria-expanded="false" class="collapse">
                        <div class="form-group">
                          <input type="text" name="about_singing" placeholder="About singing" class="form-control" />
                        </div>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="form-group">
                        <div class="checkbox">
                          <label data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                                <input type="checkbox"/>Dancing
                            </label>
                        </div>
                      </div>
                      <div id="collapseTwo" aria-expanded="true" class="collapse">
                        <div class="form-group ">
                          <input type="text" name="about_dancing" placeholder="About Dancing" class="form-control">
                        </div>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="form-group">
                        <div class="checkbox">
                          <label data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                                <input type="checkbox"/>Other
                            </label>
                        </div>
                      </div>
                      <div id="collapseThree" aria-expanded="true" class="collapse">
                        <div class="form-group ">
                          <input type="text" name="other_hobby" placeholder="Friends Other Hobby" class="form-control">
                        </div>
                      </div>
                    </div>

                  </td>
                  <td><input class="form-control" id="about_friend" name="about_friend"></td>

        </tr>
    </tbody>


</table>
<a href="#" title="" class="add-friend">Add Friend</a>

<script>
    var counter = 1;
    jQuery('a.add-friend').click(function(event){
        event.preventDefault();
        counter++;
        var newRow = jQuery('<tr><td><input type="text" name="name' +
            counter + '"/></td><td><input type="text" name="mobile' +
            counter + '"/></td><td><div class="form-group"><div class="checkbox"><input type="checkbox" name="about_singing' +
            counter + '"/>Singing</div><input type="text" name="about_singing'+
            counter + '"/></div><div class="form-group"><div class="checkbox"><input type="checkbox" name="about_dancing' +
            counter + '"/>Dancing</div><input type="text" name="about_dancing'+
            counter + '"/></div><div class="form-group"><div class="checkbox"><input type="checkbox" name="other_hobby' +
            counter + '"/>Other</div><input type="text" name="other_hobby'+
            counter + '"/></div></td><td><input type="text" name="about_friend' +
            counter + '"/></td></tr>');
        jQuery('table.friends-list').append(newRow);
    });
</script>

朋友姓名
朋友手机
业余爱好
关于
歌唱
跳舞
其他
var计数器=1；
jQuery（'a.add-friend'）。单击（函数（事件）{
event.preventDefault（）；
计数器++；
var newRow=jQuery（'SingingDancingOther'）；
jQuery（'table.friendslist'）.append（newRow）；
});

你能显示你的控制器代码吗？控制器还没有创建，因为我的第一个问题是如何在用户点击添加好友按钮时添加新行。你需要js。您可以将此复选框作为参考。是，但它仅适用于输入字段，但复选框和相关输入字段如何？该复选框取决于其ID。您可以为我提供包含所有ccs和脚本的完整文件吗？因为默认情况下，字段保持打开状态，而无需单击复选框