Несколько модальных окон Backbone на одной странице?

Я пытаюсь разрешить нескольким ссылкам открывать различные модальные окна. Проблема, с которой я сталкиваюсь, заключается в том, что первые два модальных окна работают нормально. Но любые модальные окна, которые я добавляю после этого, просто добавляют модальное окно, затемняющее экран, но никогда не отображающее модальное окно. Любые идеи, что я делаю неправильно?

Таким образом, эти два модальных окна работают нормально:

<div class="modal fade" id="ageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Age Targeting</h4>
      </div>
      <div class="modal-body">
        <h5>Select ages that should be included:</h5>
        <p>Enter comma separated ages (e.g. 13,14,15,16)</p>
        <p>You can also specify ranges (e.g. 18-34)</p>
        <textarea class="ages"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="genderModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Gender Targeting</h4>
      </div>
      <div class="modal-body">
        <h5>Select genders that should be included:</h5>
        <input type="checkbox" id="male"><label for="#male"> Male</label>
        <br>
        <input type="checkbox" id="female"><label for="#female"> Femle</label>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
      </div>
    </div>
  </div>
</div>

Вот ссылки:

<li class="add-qualification" data-toggle="modal" data-target="#ageModal">
                Age
                <div class="controls">
                  <i class="fa fa-angle-right"></i>
                </div>
              </li>
              <li class="add-qualification" data-toggle="modal" data-target="#genderModal">
                Gender
                <div class="controls">
                  <i class="fa fa-angle-right"></i>
                </div>
              </li>

Однако, когда я пытаюсь добавить третий модальный режим, он просто добавляет фон:

<li class="add-qualification" data-toggle="modal" data-target="#stateModal">
                State
                <div class="controls">
                  <i class="fa fa-angle-right"></i>
                </div>
              </li>

<div class="modal fade" id="stateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Age Targeting</h4>
      </div>
      <div class="modal-body">
        <h5>Select states that should be included:</h5>
        <select>
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
          <option value="CA">California</option>
          <option value="CO">Colorado</option>
          <option value="CT">Connecticut</option>
          <option value="DE">Delaware</option>
          <option value="FL">Florida</option>
          <option value="GA">Georgia</option>
          <option value="HI">Hawaii</option>
          <option value="ID">Idaho</option>
          <option value="IL">Illinois</option>
          <option value="IN">Indiana</option>
          <option value="IA">Iowa</option>
          <option value="KS">Kansas</option>
          <option value="KY">Kentucky</option>
          <option value="LA">Louisiana</option>
          <option value="ME">Maine</option>
          <option value="MD">Maryland</option>
          <option value="MA">Massachusetts</option>
          <option value="MI">Michigan</option>
          <option value="MN">Minnesota</option>
          <option value="MS">Mississippi</option>
          <option value="MO">Missouri</option>
          <option value="MT">Montana</option>
          <option value="NE">Nebraska</option>
          <option value="NV">Nevada</option>
          <option value="NH">New Hampshire</option>
          <option value="NJ">New Jersey</option>
          <option value="NM">New Mexico</option>
          <option value="NY">New York</option>
          <option value="NC">North Carolina</option>
          <option value="ND">North Dakota</option>
          <option value="OH">Ohio</option>
          <option value="OK">Oklahoma</option>
          <option value="OR">Oregon</option>
          <option value="PA">Pennsylvania</option>
          <option value="RI">Rhode Island</option>
          <option value="SC">South Carolina</option>
          <option value="SD">South Dakota</option>
          <option value="TN">Tennessee</option>
          <option value="TX">Texas</option>
          <option value="UT">Utah</option>
          <option value="VT">Vermont</option>
          <option value="VA">Virginia</option>
          <option value="WA">Washington</option>
          <option value="WV">West Virginia</option>
          <option value="WI">Wisconsin</option>
          <option value="WY">Wyoming</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
      </div>
    </div>
  </div>
</div>

Редактировать:

Еще немного контекста. У меня есть ul с несколькими li, каждый из которых должен отображать свое собственное модальное окно, которое позволяет пользователю выбирать возраст, пол, состояние и т. д.

<div class="targeting">
        <div class="row">
          <div class="col-sm-4">
            <h5>Targeting options</h5>
            <ul class="targeting-list">
              <li class="add-qualification" data-toggle="modal" data-target="#ageModal">
                Age
                <div class="controls">
                  <i class="fa fa-angle-right"></i>
                </div>
              </li>
              <li class="add-qualification" data-toggle="modal" data-target="#genderModal">
                Gender
                <div class="controls">
                  <i class="fa fa-angle-right"></i>
                </div>
              </li>
              <li class="add-qualification" data-toggle="modal" data-target="#stateModal">
                State
                <div class="controls">
                  <i class="fa fa-angle-right"></i>
                </div>
              </li>