Bootstrap 3 navbar dropdown element not triggering modal form

Java 1.8, JSP, Bootstrap 3.4.1

this snippet of index.jsp works fine - tabs appear, tabs3 is displayed as default, and clicking on different tabs display the correct stuff for the selected tab

<nav>
  <ul class="nav nav-tabs">
    <li><a data-toggle="tab" href="#tabs1">Home</a></li>
    <li><a data-toggle="tab" href="#tabs2">Bars</a></li>
    <li><a data-toggle="tab" href="#tabs3" class="active">Bands</a></li>
  </ul>
</nav>
<div class="tab-content">
  <div id="tabs1" class="tab-pane fade">
    <p>some tabs1 stuff goes here
  </div>
  <div id="tabs2" class="tab-pane fade">
    <p>some tabs2 stuff goes here
  </div>
  <div id="tabs3" class="tab-pane fade">
    <p>some tabs3 stuff goes here
  </div>
</div>

and this nav-bar appears correctly across top of page, and the "Register a band" and "Register a bar" dropdowns do appear as expected

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">GrrlCrew</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
      </ul>
      <ul class="navbar-nav navbar-right">
        <li class="nav-item dropdown">
          <span class="glyphicon-user"></span><a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">Sign Up<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#popup_register_band">Register a band</a></li>
            <li><a class="dropdown-item" href="#popup_register_bar">Register a bar</a></li>
          </ul>
        </li>
      <li>
        <a href="#popup_login"><span class="glyphicon glyphicon-log-in"></span> Login</a>
      </li>
      </ul>
    </div>
  </div>
</nav>

but clicking "Register a band" does not bring up its modal form

<div class="modal fade" id="popup_register_band" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Register a band</h5>
      </div>
      <div class="modal-body">
        <form id="form_signup_band" action="#" method="post">
          <fieldset>
            <div class="form-group">
              <label class="form-label" for="name">name</label>
              <input name="name" class="form-control" type="text" size="30" minlength="1" maxlength="30"/><p>
            </div>
            <div class="form-group">
              <label class="form-label" for="genre">genre</label><p>
              <select id="genre_dropdown" name="genre">
                <option value="country">country</option>
                <option value="metal">metal</option>
                <option value="alternative">alternative</option>
              </select><p>
            </div>
            <div class="form-group">
              <label class="form-label" for="contactPage">contactPage</label>
              <input name="contactPage" class="form-control" type="text" size="60" minlength="1" maxlength="60"/><p>
            </div>        <div class="form-group">
              <label class="form-label" for="city">city</label>
              <input name="city" class="form-control" type="text" size="30" minlength="1" maxlength="30"/><p>
            </div>
            <div class="form-group">
              <label class="form-label" for="state">state</label><p>
              <select id="state_dropdown" name="state">
                <option value="AK">AK</option>
                <option value="AS">AS</option>
                <option value="AZ">AZ</option>
                <option value="CA" selected>CA</option>
              </select><p>
            </div>
            <div class="form-group">
              <label class="form-label" for="psw">password</label>
              <input name="psw" class="form-control" type="password" placeholder="f0rgetMeNot" size="30" minlength="1" maxlength="30"/><p>
            </div>
            <div class="form-group">
              <label class="form-label" for="psw_matcher">password again</label>
              <input name="psw_matcher" class="form-control" type="password" size="30" minlength="1" maxlength="30"/><p>
            </div>
          </fieldset>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success"   type="submit" id="popupBand_signup_submit" onclick="bandSignupSubmit">Submit</button>
        <button class="btn btn-secondary" type="button" id="popupBand_signup_cancel" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>

I am pretty new to Bootstrap so there's likely some subtlety I'm lacking. Any ideas?