Bootstrap close modal not working
<p>I have two button here that are being used to close the modal. The first is the close icon and the other one is cancel button, both use data-dismiss to close the modal. However, both of them are not working. I am using the same code for another modal and there they are working fine. Any guesses? </p>

<pre><code>&lt;div id="timeSelectModal{{entry.position - 1}}" style="display: none" class="modal"&gt;
    &lt;div class="modal-dialog"&gt;
        &lt;div id="timeSelectModalContent" class="modal-content"&gt;
            &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
            &lt;label&gt;
                &lt;input id="checkbox8pm{{entry.position - 1}}" type="checkbox" value="first_checkbox"&gt;
                &lt;label class="checkbox-label"&gt;Thursday, 08:00 pm.&lt;/label&gt;
            &lt;/label&gt;
            &lt;br&gt;
            &lt;label&gt;
                &lt;input id="checkbox9pm{{entry.position - 1}}" type="checkbox" value="second_checkbox"&gt;
                &lt;label class="checkbox-label"&gt;Thursday, 09:30 pm.&lt;/label&gt;
            &lt;/label&gt;
            &lt;div id="time-modal-footer" class="modal-footer"&gt;
                &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
                &lt;button type="button" class="btn btn-success" id="timeSaveButton{{entry.position - 1}}" v-on:click="setTime(entry.position - 1)"&gt;Save&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>