Dynamically created content shows the same title / description?

See more:

CSS

HTML

jQuery

Google-Docs

Hey there guys, I'm at a loss and can't seem to figure this out.

Basically, I have an image gallery that pulls it's info from Google Spreadsheets using Sheetrock.js and Handlebars.js to template. When you click on the magnifying glass, it enlarged the image and displays the title and description (as defined by Google Sheets).

My problem is that it shows the same name and info for all the images.

Here is an example.


Here is the code that makes up the modal that pops up

<div class="modal">
                <div class="overlay">
                                <a class="modal__close" href="#"><div class="fa fa-times modal__close"></div></a>

                </div>
                <div class="modal__contents modal--transition">
                    
                    <img src="{{cells.ImageURL}}">
                    <div class="info-box">
                    <h3 class="car-title">{{cells.Title}}</h3>
                    <p class="car-info">{{cells.Description}}</p>    
                    </div>
                </div>
             </div>

Here is the JS for my template with Sheetrock / Handlebars JS

            // Define spreadsheet URL.
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1it6QkBRPDsIqYOtr_UbFFmHBEADVkKaKjdghLSX5d3E/edit#gid=0';

// Compile Handlebars template for team RBI leaders.
var RBITemplate = Handlebars.compile($('#team-rbi-template').html());

// Load top five team RBI leaders.
$('#image-grid').sheetrock({
  url: mySpreadsheet,
  rowHandler: RBITemplate
});


});

Just can't seem to get the title and description matched up, any help is appreciated!