Using jquery-store-locator-plugin v2 with Multiple Forms

Question

I'm trying to get version 2 of the jquery-store-locator-plugin to work on a dynamically generated page of location results with little success.

The problem is that I have a form for each location and I'm unsure how to hook up the plugin to the form when its submit button is clicked. Can someone please help me with that?

For now, I'm just running the demo found on:

https://bjornblog.com/storelocator/v2/

In the container, there is a form:

    <div class="bh-sl-container">
  <div id="page-header">
    <h1 class="bh-sl-title">Using Chipotle as an Example</h1>
    <p>I used locations around Minneapolis and the southwest suburbs. So, for example, Edina, Plymouth, Eden Prarie, etc. would be good for testing the functionality. 
    You can use just the city as the address - ex: Edina, MN.</p>
  </div>

  <div class="bh-sl-form-container">
    <form id="bh-sl-user-location" method="post" action="#">
        <div class="form-input">
          <label for="bh-sl-address">Enter Address or Zip Code:</label>
          <input type="text" id="bh-sl-address" name="bh-sl-address" />
        </div>

        <button id="bh-sl-submit" type="submit">Submit</button>
    </form>
  </div>

  <div id="bh-sl-map-container" class="bh-sl-map-container">
    <div id="bh-sl-map" class="bh-sl-map"></div>
    <div class="bh-sl-loc-list">
      <ul class="list"></ul>
    </div>
  </div>

In the demo, the storeLocator() function is called at the bottom of the page ( whereas I'd like to invoke it on the button click or form submit).

    $(function() {
        $('#bh-sl-map-container').storeLocator();
    });

In my JSP page, I have a loop that inserts a form within a table row:

    <tbody>
       <c:forEach var="product" items="${productList}" varStatus="loop">
            <tr>
               <td class="product_name"><a href="${product.detailsLink}" target="_blank">${product.name}</a></td>
               <td class="thumb"><a href="${product.detailsLink}" target="_blank"><img src="${product.imagePath}" alt="${product.name}" /></a></td>
               <td class="desc">${product.desc}</td>
               <td class="price">${product.price}</td>
               <td class="">
                 ${product.storeName}
                 <div id="frmContainer${loop.index}">
                   <form id="frmMapIt${loop.index}" class="map_it" onsubmit="go($('#frmContainer${loop.index}'), 'frmMapIt${loop.index}', 'bh-sl-address${loop.index}')">
                        <input type="text" id="bh-sl-address${loop.index}" name="bh-sl-address${loop.index}" />

                        <button id="bh-sl-submit${loop.index}" type="submit">Map it!</button>
                   </form>      
                 </div>
               </td>
           </tr>
       </c:forEach>
     </tbody>
   </table>

This is the function that invokes the storeLocator function:

    function go(formContainer, formID, addressID) {     
  $('#bh-sl-map-container').storeLocator({
    'dataType': 'json',
    'dataLocation': 'data/locations.json',
    'slideMap': false,
    'modal': true,
    'formContainer': formContainer,
    'formID': formID,
    'addressID': addressID
  });

}

Thanks!

Rob