Going to Anchor Text inside a Bootstrap Tab

I’m trying to create a URL link that opens a particular page at a particular element (a form).

But the element is inside a bootstrap tab on that page.

To get the correct tab to open I’ve followed this javascript Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

As I now have a # hashtag for the tab in the URL I can’t seem to find how to add second hashtag or element reference.

Any thoughts on how I can open the page to the form inside the second tab?

My tabs:

<div class="col-md-12">
     <ul class=" nav-tabs nav">
         <li id="tab-1" class="active nav-tab nil-tick ">
             <a href="#stays" data-toggle="tab" aria-expanded="false">List<span class="pronoun"> a</span> Stay </a>
         </li>
         <li id="tab-2" class="nil-tick">
             <a href="#experiences" data-toggle="tab" aria-expanded="false">List<span class="pronoun"> an</span> Experience </a>
         </li>
         <li id="tab-3" class="nil-tick">
             <a href="#other" style="color:unset" data-toggle="tab" aria-expanded="false"> Other </a>
         </li>
     </ul>
 </div>

And the section I wish to link to

<form class="subscribe_form" method="POST" style="background:white" id="experience-application-form" autocomplete="off">

And the javascript

  // Javascript to enable link to tab
  var hash = document.location.hash;

  var prefix = "tab-";
  if (hash) {
      $('.nav-tabs a[href="' + hash.replace(prefix, "") + '"]').tab('show');
  }

  // Change hash for page-reload
  $('.nav-tabs a').on('shown.bs.tab', function (e) {
      window.location.hash = e.target.hash.replace("#", "#" + prefix);
  });