Multiple data-toggle not working correctly : I have the following page: http://mindspyder.com/newline/my-account.html

And the following code on that page:

<!-- begin snippet: js hide: false -->

<!-- language: lang-html -->

    <!-- Nav tabs -->

    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item"> <a class="btn btn-primary btn-sm" href="#" role="button"><i class="fa fa-search-plus"></i> View</a> </li>
      <li class="nav-item"> <span data-toggle="modal" data-target="#myModal"><a class="btn btn-primary btn-sm" href="#delete" role="tab" data-toggle="tab"><i class="fa fa-times"></i> Delete</a></span></li>
      <li class="nav-item"> <a class="btn btn-primary btn-sm" href="#download" role="tab" data-toggle="tab">Settings</a> </li>
    </ul>

    <!-- /Nav tabs --> 
    <!-- Tab panes -->

    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="review"></div>
      <div role="tabpanel" class="tab-pane" id="edit"></div>
      <div role="tabpanel" class="tab-pane" id="delete">hello</div>
      <div role="tabpanel" class="tab-pane" id="download">
        <p>
        <form>
          <p>
            <label>
              <input type="checkbox" name="CheckboxGroup1" value="Invoice" id="CheckboxGroup1_0">
              Invoice</label>
            <br>
            <label>
              <input type="checkbox" name="CheckboxGroup1" value="Establishment Kit" id="CheckboxGroup1_1">
              Establishment Kit</label>
            <br>
            <label>
              <input type="checkbox" name="CheckboxGroup1" value="Declaration of Custody Trust" id="CheckboxGroup1_2">
              Declaration of Custody Trust</label>
            <br>
            <label>
              <input type="checkbox" name="CheckboxGroup1" value="Trustee Minutes" id="CheckboxGroup1_3">
              Trustee Minutes</label>
            <br>
            <label>
              <input type="checkbox" name="CheckboxGroup1" value="Compliance Letter" id="CheckboxGroup1_4">
              Compliance Letter</label>
            <br>
          </p>
        </form>
        </p>
        <p>
          <button type="button" class="btn btn-success btn-sm">Download Selected <i class="fa fa-arrow-down"></i></button>
        </p>
      </div>
    </div>

    <!-- /Tab panes -->

<!-- end snippet -->

Now, if you go to the page and click the blue Delete button, everything works perfectly.  Now if you click Cancel, and click on one of the other tabs, it still works as it should.  The problem is you click Delete again, it doesn't switch back to the Delete tab when opening the modal, but leaves it on the previous tab.

What am I doing wrong?