Bootstrap 4 使用bootstrap4模式弹出窗口

我有一个问题，在引导模式4，我有两个输入时，我试图点击第一个输入弹出窗口是工作，但第二个输入是不工作的！！！我想知道为什么第一个输入是工作，第二个不是。。。我怎样才能解决这个问题呢

看看我的Html

<input type="text" class="form-control" data-toggle="modal" data-target="#myM1" data-backdrop="false"> <!--First Input is Work -->
<input type="text" class="form-control" data-toggle="modal" data-target="#myM2" data-backdrop="false"><!--Second Input is not Work-->

        <!-- First Modal -->
        <div class="modal" id="myM1">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Hello 1</h6>
                    <button type="button" class="btn btn-outline-danger btn-sm" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body">Hello World 1</div>
        </div>

        <!-- Second Modal -->
        <div class="modal" id="myM2">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Hello 2 </h6>
                    <button type="button" class="btn btn-outline-danger btn-sm" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body">
                  Hello World 2
                </div>
            </div>
        </div>

你好1
×
你好，世界1
你好2
×
你好，世界2

---

模式HTML格式不正确

<input type="text" class="form-control" data-toggle="modal" data-target="#myM1" data-backdrop="false">
<input type="text" class="form-control" data-toggle="modal" data-target="#myM2" data-backdrop="false">

<div class="modal" id="myM1">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Hello 1</h6>
                <button type="button" class="btn btn-outline-danger btn-sm" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                Hello World 1
            </div>
        </div>
    </div>
</div>

<div class="modal" id="myM2">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Hello 2 </h6>
                <button type="button" class="btn btn-outline-danger btn-sm" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                Hello World 2
            </div>
        </div>
    </div>
</div>

你好1
×
你好，世界1
你好2
×
你好，世界2

工作：