Bootstrap 5.2.3模态框内嵌表单触发空白屏问题求助

使用Bootstrap 5.2.3开发时，遇到如下问题：当模态框内嵌的表单中，time输入框数量超过2个，或添加date输入框、<select>下拉框时，打开模态框会导致屏幕空白，无法正常显示模态框内容。

可正常运行的模态框代码（含2个time输入框） #

<div class="hidden modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- Modal body -->
            <div class="modal-body" id="bookingIdText">

            </div>
            <form action="myBookingBackend.php" method='post'>
                <div>
                    <label for="timeStart">Time Start</label> 
                    <input type="time" name="timeStart" id="timeStart">

                    <label for="timeEnd">Time End</label> 
                    <input type="time" name="timeEnd" id="timeEnd">

                    <input type="hidden" name="bookingIdHidden" id="bookingIdHidden" value="">
                </div>

                <button type="submit" id="submit" class="btn btn-primasry">Submit</button>
            </form>
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

（正常运行时，模态框可正常显示表单内容）

无法正常运行的模态框代码（新增1个time输入框） #

新增的time输入框为复制原有输入框并修改name和id：

<div class="hidden modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- Modal body -->
            <div class="modal-body" id="bookingIdText">

            </div>
            <form action="myBookingBackend.php" method='post'>
                <div>
                    <label for="timeStart">Time Start</label> 
                    <input type="time" name="timeStart" id="timeStart">

                    <label for="timeEnd">Time End</label> 
                    <input type="time" name="timeEnd" id="timeEnd">

                    <label for="timeEnd1">Time End</label> 
                    <input type="time" name="timeEnd1" id="timeEnd1">

                    <input type="hidden" name="bookingIdHidden" id="bookingIdHidden" value="">
                </div>

                <button type="submit" id="submit" class="btn btn-primasry">Submit</button>
            </form>
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

（打开此模态框时，屏幕空白，无法正常显示内容）

使用的Bootstrap资源 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

引入bootstrap-select后的尝试 #

尝试使用<select>和<option>标签创建下拉框时出现同样问题，引入bootstrap-select组件后仍未解决：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

模态框触发的jQuery代码 #

模态框使用jQuery设置隐藏字段的值，相关代码如下：

function takeId(newButtonId){
    
    $('#myModal').modal('show');
    try {
        $('#bookingIdHidden').attr('value', newButtonId);

    } catch(err) {
        alert(err); 
    }
};

<script src="jquery-3.6.1.min.js"></script>
<input type='button' name='edit' value='Edit' onclick=takeId($newButtonId) id='1' </button>

恳请各位提供帮助，谢谢！

内容的提问来源于stack exchange，提问作者BUR073