How to attach an element to a form - php

Question

I'm writing a dynamic form that appends available text-fields depending on value that was selected by the user. How do I make it work? For context, it's an edit button, so the text-field will be pre-filled with STRING from the database.
The functions of getting the data from the database works, and the modal also shows, but the problem is just that the select-form doesn't work.
I tried calling "#btn-edit-account" but it doesn't work.
Code for the modal edit-account
<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">×</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 for 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 for 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 for appendOrganization
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);
}
The select in the modal should show the available choices in the given select, then will dynamically change the form depending on the selected choice.