title: How do I dynamically find out what the ID or class of a div?
body: <p>I have a scrolling div that loading in data via ajax &amp; json from an API as you horizontally scroll.</p>
  
  <p>I currently have it working but the problem I have is that I have multiple scrolling divs on a single page.  I need to let jquery know the ID of the div that is being scrolled so that the ajax can use a different API call to load in the correct data to that specific div.</p>
  
  <p>Here is HTML my code:   </p>
  
  <pre><code>&lt;div id="ip-technology" class="scroll-box"&gt;
  &lt;h2&gt;Latest Videogames Titles&lt;/h2&gt;
      &lt;a class="view" href="technology.html"&gt;See all&lt;/a&gt;
      &lt;ul class="scroll-horizontal mCustomScrollbar _mCS_3"&gt;
      &lt;div class="mCustomScrollBox mCSB_horizontal" id="mCSB_3" style="position:relative; height:100%; overflow:hidden; max-width:100%;"&gt;&lt;div class="mCSB_container" style="position: relative; left: 0px; width: 6721px; "&gt;  
      &lt;li class="product-Magazine"&gt;
          &lt;a href="#"&gt;
              &lt;span class="store-badge"&gt;&lt;/span&gt;
          &lt;img src="cover.jpg" width="124" height="166"&gt;
      &lt;/li&gt;
             &lt;/div&gt;
  
      &lt;div class="mCSB_scrollTools" style="position: absolute; display: block; "&gt;
      &lt;div class="mCSB_draggerContainer" style="position:relative;"&gt;
      &lt;div class="mCSB_dragger ui-draggable" style="position: absolute; width: 149px; "&gt;
      &lt;div class="mCSB_dragger_bar" style="position:relative;"&gt;
      &lt;/div&gt;&lt;/div&gt;&lt;div class="mCSB_draggerRail"&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>And here is the jquery/ajax...</p>
  
  <pre><code> $(".scroll-horizontal").mCustomScrollbar({
          horizontalScroll:true,
          scrollEasing:"easeOutBack",
          advanced:{
              autoExpandHorizontalScroll: true
          },
          callbacks:{
              onTotalScrollOffset: 30,
              onTotalScroll: function(){                  
  
               var url = 'http://www.URL-TO-API.com' //Needs to somehow pass in the div id
  
                $.ajax({
                      type: 'GET',
                      url: url,
                      async: true,
                      jsonpCallback: 'callback',
                      dataType: 'jsonp',
                      success: function(data)
                      {
  
                           $.each(data.products, function(key, val)
                           {
                                  if (loadNumber &lt;= 4) {
                                       $('li.loading').before('&lt;li class="product-ebook"&gt;&lt;a href="product.html"&gt;&lt;span class="store-badge"&gt;&lt;/span&gt;&lt;img src="'+val.image+'" width="124" height="166" /&gt;&lt;h3&gt;'+val.title+'&lt;/h3&gt;&lt;/a&gt;&lt;/li&gt;');
                                  };
                                  if (loadNumber &gt;= 4) {
                                       $('li.loading').hide();
                                  };
                           });
  
                            $('h3').html(function(index, currentHtml) {
                                return currentHtml.replace('Issue', '&lt;span&gt;Issue')
                                                  .replace('Vol', '&lt;span&gt;Vol');
                                $(this).apppend("&lt;/span&gt;");
                            });
                            $('.scroll-horizontal').mCustomScrollbar("update");
  
  
                      },
                      error: function() {
                          console.log('failed');
                      }
                      });
              }
          }
      });
  </code></pre>