<button type="button" class="btn btn-primary" data-mdb-ripple-init data-mdb-modal-init

                    data-mdb-target="#user_modal" id="create_user_btn">

                    Create User

                </button>

​

<div class="modal fade" id="user_modal" tabindex="-1" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title">Create User</h5>

                    <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>

                </div>

                <div class="modal-body py-2">

                    <form id="user_form" data-method="POST" autocomplete="off" novalidate>

                        <input type="hidden" id="user_id">

                        <div class="row my-2">

                            <div class="col-12">

                                <label for="user_name" class="form-label fw-bold text-dark mb-1">User Name:</label>

                                <input type="text" class="form-control m-0" id="user_name" placeholder="Enter Name"

                                    aria-label="User Name" aria-describedby="user_name" autocompleted="">

                                <small class="error-message text-danger" id="user_name_err_msg"></small>

                            </div>

                        </div>

                        <div class="row my-2">

                            <div class="col">

                                <label for="user_environment_select"

                                    class="form-label fw-bold text-dark">Environment:</label>

                                <select class="text-capitalize" id="user_environment_select" data-mdb-select-init data-mdb-container="#user_modal"

                                    data-mdb-option-height="25"></select>

                                <small class="error-message text-danger" id="user_environment_select_err_msg"></small>

                            </div>

                        </div>

                    </form>

                </div>

                <div class="modal-footer py-2">

                    <a class="me-auto d-none cursor-pointer" id="toggle_user_change_password">Change password?</a>

                    <button type="button" class="btn btn-secondary text-capitalize fw-bold" data-mdb-ripple-init

                        data-mdb-dismiss="modal">Cancel</button>

                    <button type="submit" class="btn btn-primary text-capitalize fw-bold float-end" form="user_form"

                        id="user_form_submit_btn" data-mdb-ripple-init>Submit</button>

                </div>

            </div>

        </div>

    </div>

​

document.addEventListener("DOMContentLoaded", (event) => {

            document.getElementById("create_user_btn").addEventListener("click", initializeUserModal)

        });

​

        function initializeUserModal() {

​

            const listAllEnvironments = [

                {

                    "id": 3,

                    "envid": "7661b31c-c60a-4801-abe5-9e4bf38794a7",

                    "name": "user acceptance testing",

                    "description": "environment for user acceptance testing"

                },

                {

                    "id": 1,

                    "envid": "5949f98d-c121-4f92-a01e-b661d14f1030",

                    "name": "development",

                    "description": "environment for developments"

                },

                {

                    "id": 2,

                    "envid": "399c2e5e-2ce3-412b-b951-a8e2d1dc8d66",

                    "name": "quality assurance",

                    "description": "environment for quality assurances"

                }

            ]

​

            if (!listAllEnvironments.length) {

                return;

            }

            listAllEnvironments.forEach(env => {

                const option = new Option(env.name, env.envid);

                document.getElementById("user_environment_select").add(option);

            });

​

        }