Ajax local content place different objects on another page using jQuery

Question

I have a series of products on a page with a class .small-product and inside each one I have an image and its tittle as links to a larger view..

What I want to do it to load the larger view ratings into the .small-product layout. here is the html of the .small-product:

<div class="small-product">
<div class="photo"><img src="image/path>"</div>
<div class="lato" id="rating-stars"></div>
<div class="title"><a href="link">Title</a></div>  
<div class="price">£5</div> 
</div>

Large view content to Ajax:

<div class="product-large-reviews" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue" itemscope itemtype="http://schema.org/ratingValue" class="rating">{module_ratingrank,/images/rating}</span>
<span itemprop="reviewCount" class="counter-ratings"></span>
</div>

My JS with some Jquery:

$('.small-product').each(function() {
  var ratingContainer = $('#rating-stars');
  var spacing = ('+');
  var smallProductLink = $('.small-product a').attr('href'),
  sourceRatings = smallProductLink + spacing +'.product-large-reviews';
  ratingContainer.load(sourceRatings);

});

Now what I tried and worked but it only works for 1 individual element is if I use a .load('/href/path/to/large/view .product-large-reviews');

But I want every product to use their link to fetch their own information from their large view.

I get only a 404 response from the server saying that it could not be found, I guess it cannot be found because the web address looks like they are together with the class to load e.g www.site.com/path/to/large/view.product-large-reviews. i tried my ways to make a space between but it keeps returning 404.

Some help would be awesomely appreciated!