Append Dropdown Form using javascript - Laravel

Question

I have a form with a dropdown. I want to make the dropdown to appear multiple times on click of a button. Like picture below:

If I click "add more student" button, another student's dropdown should appear.

Here is my code

<form_answer id = "more_student" > 
     <div id ="student_id" class="form-group">
         <label class="form-control-label" for="student_id">{{ __('Student') }}</label>
              <select type="text" name="student_profile_id" id="student_id" class="form-control">
                 <option disabled selected> -- select an option -- </option>
                  @if($student)
                  @foreach($student as $data)
                    <option value="{{$data->id}}"> {{$data->student_name}}</option>
                  @endforeach
                  @endif
              </select>                             
      </div>

  <div class = "text-right">
      <a class="btn btn-success mt-4" id = "btn_add">Add More Student</a>
  </div>

And the script:

<script>
    $(document).ready(function(){
        $('#btn_add').click(function(){
            add_row();
        });
});

    var id = 0;
    function add_row(){
        id++;
        var html =  '<div id ="student_id" class="form-group">' +
                        '<label class="form-control-label" for="student_id">{{ __("Student") }}</label>' +
                            '<select type="text" name="student_profile_id" id="student_id" class="form-control">' +
                                '<option disabled selected> -- select an option -- </option>' +
                                    '@if($student)' +
                                    '@foreach($student as $data)' +
                                        '<option value="{{$data->id}}"> {{$data->student_name}}</option>' +
                                    '@endforeach' +
                                    '@endif' +
                            '</select>' +
                    '</div>' ;

        $("more_student").append(html);
    }
    </script>

This code is not working. When I click the button, nothing happens.Can anyone help me with this?

Answer 1

First you forgot # before $("#more_student").append(html); and if you have multiple student_profile_id then you have to make it array like name="student_profile_id[]" and every control has unique id

try this one

    <script>
        var students =  eval({!! $student !!});
        $(document).ready(function(){
            $('#btn_add').click(function(){
                add_row();
            });
        });

        function add_row(){
            var index = $('input[name="student_profile_id[]"]').length+1;
            var html =  `<div id="student_div_id`+index+`" class="form-group">
                            <label class="form-control-label" for="student_id">{{ __("Student") }}</label>'
                                <select type="text" name="student_profile_id[]" id="student_id`+index+`" class="form-control">
                                    <option disabled selected> -- select an option -- </option>`;
                                        $.each(students,function(ind,el)){
                                            html+=`<option value="`+el.id+`"> `+el.student_name+`</option>`;
                                        });
                        html+=`</select>
                        </div>`;
            $("#more_student").append(html);
        }
    </script>

Answer 2

You are trying to inject Blade template after rendering inside your Javascript which is not possible. You should generate your var html outside of your add_row function and then insert it upon button click:

    var html = '<div id ="student_id" class="form-group">' +
        '<label class="form-control-label" for="student_id">{{ __("Student") }}</label>' +
        '<select type="text" name="student_profile_id" id="student_id" class="form-control">' +
        '<option disabled selected> -- select an option -- </option>'
        @if($student)
            @foreach($student as $data)
                +'<option value="{{$data->id}}"> {{$data->student_name}}</option>'
            @endforeach
        @endif
        +'</select>' +
    '</div>';

    function add_row() {
        id++;
        $("#more_student").append(html);
    }