add table row on OnClick button with JavaScript and save in database in Laravel

Question

I am creating a table row for user to add friend details, having number of columns such as name, mobile.. and three checkbox, and when user click on a check box an input field related to that checkbox is open for entering some information with that field, it can select any number of checkbox and it must show that much number of input fields related to that checkbox and user can fill that input fields. Now this can be done easily when user have condition with only one friend but i want to make it for user that it can add multiple friend details by clicking on "add friend button", but i am stuck in how to give id, names, ... to input fields and also for checkbox so that when user click to check box related input field must be open and save all data in database using laravel.

I am created simply only for one friend as below...

<table class="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>

<input type="button" value="add friend">

So how can I do that for multiple friend details and save to database in Laravel??

Answer 1

This is to add new row by clicking a button. You need to include 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>