Как прикрепить элемент к форме

Question

Я пишу динамическую форму, которая добавляет доступные текстовые поля в зависимости от значения, выбранного пользователем. Как мне заставить это работать? Для контекста это кнопка редактирования, поэтому текстовое поле будет предварительно заполнено STRING из базы данных.

Функции получения данных из базы данных работают, и модальное окно также показывает, но проблемапросто форма выбора не работает.

Я пытался вызвать "# btn-edit-account", но она не работает.

код для модального аккаунта edit

 <div class="modal fade" id="edit-account-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Edit Account Details</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="tab-content" id="nav-tabContent">
              <div class="tab-pane fade show active" id="nav-add" role="tabpanel" aria-labelledby="nav-home-tab">

                <form id="form-edit-account">
                 <input type="hidden" name="_token" value="{{csrf_token()}}">
                  <div class="container my-2">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group">
                            <label>Role</label>
                            <select type="select" id="select-role" class="form-control edit_role select-role" name="role_id" required>
                            </select>
                        </div>
                        <div class="form-group student-number-container hidden">
                          <label>Student Number</label>
                            <input type="text" class="form-control" id="edit_student_number" name="student_number" required>
                        </div>

                        <div class="organization-container hidden">


                        </div>

                        <div class="form-row">
                          <div class="col-md-6">
                            <label>First name</label>
                            <input type="text" class="form-control" id="edit_first_name" name="first_name" required>
                          </div>
                          <input type="hidden" id="token" name="_token" value="{{csrf_token()}}">
                          <div class="col-md-6">
                            <label>Last Name</label>
                            <input type="text" class="form-control" id="edit_last_name" name="last_name" required>
                          </div>
                        </div>
                        <div class="form-group">
                              <label>Email</label>
                              <input type="email" class="form-control" id="edit_email" name="email">
                        </div>
                        <div class="form-row">
                        <label class="control-label">New Password <span class="required">*</span></label>
                        <input type="password" id="new_password" name="new_password" minlength="6" class="form-control password" required>
                        </div>
                        <div class="form-row">
                                <label class="control-label">Confirm New Password <span class="required">*</span></label>
                                <input type="password" id="confirm_password" name="confirm_password" minlength="6" class="form-control password" required>
                        </div>
                        <div class="form-group text-right mt-4">
                          <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
                          <button type="submit" class="btn btn-success btn-confirm-edit-account">Update</button>
                        </div>
                      </div>
                    </div>
                  </div>


                </form>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Javascript для btn-edit-account

$(document).on('click', '.btn-edit-account', function() {
      $('#edit-account-modal').modal('show');
      var id  = $(this).attr('data-id');
      $.ajax({
            url: "users/get-specific-user-info",
            type: "POST",
            data: {
              id: id,
              _token: "{{csrf_token()}}"
            },
            success: function(data) {
              // $('#edit_role').val(data.role_id);
              $('#edit_first_name').val(data.first_name);
              $('#edit_last_name').val(data.last_name);
              $('#edit_email').val(data.email);
              console.log(data);
            }
        });
      });

  });

Javascript для select-role

$(document).on('change', '#select-role', function() {
      var val = $(this).val();

      if(val != 3){
        $('.student-number-container').show();
      }
      else {
        $('.student-number-container').hide();
      }

      if(val != 1){
        $('.organization-container').html("");
      }
      else {
        appendOrganization();
        $('.organization-container').show();
      }

    });

функция для добавления к организации

function appendOrganization() {
    var html = "";

    html += '<div class="form-group"> <label>Organization Name</label> <input type="text" class="form-control" name="organization_name" required> </div>';
    html += '<div class="form-group"> <label>Organization Type</label> <select type="select" id="select-org-type" class="form-control" name="organization_type" required>'+
    '<option value="" selected disabled>Select Organization Type</option>'+
    '<option value="TYPE A">TYPE A</option>'+
    '<option value="TYPE B">TYPE B</option>'+
    '</select></div>';
    html += '<div class="form-group"> <label>College</label> <select type="select" id="select-org-type" class="form-control" name="organization_college" required> <option value="" selected disabled>Select Organization Type</option> <option value="COLLEGE ONE">COLLEGE ONE</option> <option value="COLLEGE TWO">COLLEGE TWO</option> </select> </div>';
    $('.organization-container').html(html);              
  }

Выбор в модале должен показать доступные варианты в данном выборе, а затем будет динамически изменять форму в зависимости от выбранного выбора.