Custom data attributes with multiple elements

Question

I'm trying to make a custom data attributes on my website in lightbox. I just made it for one element in Javascript and it works fine but I want to make it works in multiple elements.

How it works now: I have "a" element with id="image-1" and I want to make that javascript will recognise id image-2,3,4... and show correct data from custom attributes. Note that I can't use onclick because it makes that lightbox stops work.

Here is HTML:

<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
    <div  class="thumbnail grid-wrapper thumbnail-single">
        <a id="image-1" href="img/photo2.jpeg" data-tags="<li>t31232est</li> <li>test</li>" data-fb="http://test1.pl" data-tt="http://test2.pl" data-gplus="http://te23432st3.pl"  data-lightbox="roadtrip" data-title="This is a caption. This is a caption This is a caption This is a caption"><img src="img/photo2.jpeg" class="img-responsive" alt="..."></a>
    </div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
    <div  class="thumbnail grid-wrapper thumbnail-single">
        <a id="image-2" href="img/photo3.jpg" data-tags="<li>test</li> <li>test</li>" data-fb="http://test55.pl" data-tt="http://test253342.pl" data-gplus="http://tes32423t3.pl"  data-lightbox="roadtrip" data-title="This is a caption. This is a caption This is a caption This is a caption"><img src="img/photo3.jpg" class="img-responsive" alt="..."></a>
    </div>
</div>

Here is JS:

var global = document.getElementById('image-1');
var tagList = global.getAttribute('data-tags');
var facebook = global.getAttribute('data-fb');
var twitter = global.getAttribute('data-tt');
var gplus = global.getAttribute('data-gplus');

$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><ul class="tag-list">' + tagList +'</ul><br/><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer">' +
        '<ul class="social-list"><li><a href="' + facebook + '"><img src="img/fb_circle_white.png" class="img-responsive"></a></li><li><a href="' + twitter + '"><img src="img/tt_circle_white.png" class="img-responsive"></a></li><li><a href="' + gplus + '"><img src="img/gplus_circle_white.png" class="img-responsive"></a></li></ul><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));

I'm trying to make it works on Lightbox Plugin (http://lokeshdhakar.com/projects/lightbox2/)

UPDATE

I just used function in onclick and when I'm testing it, it shows correct IDs. But still can't put it into getElementByID as a string.

id="image-1" onclick="GetID(this.id)"

window.GetID = function(elem_id){
    alert(elem_id);
  }

  var global = document.getElementById(GetID());
  var tagList = global.getAttribute('data-tags');
  var facebook = global.getAttribute('data-fb');
  var twitter = global.getAttribute('data-tt');
  var gplus = global.getAttribute('data-gplus');

UPDATE 2:

Almost done. I've made my variables global. Console log shows correct ID and other data attribs. Problem is when I'm trying to put result into html in javascript. Here is example.

<ul class="social-list"><li><a href="' + facebook + '"><img src="img/fb_circle_white.png" class="img-responsive"></a></li>

+ current JS:

id="image-1" onclick="window.GetID(this.id)"

  var global;
  var tagList;
  var facebook;
  var twitter;
  var gplus;

  window.GetID = function(elem_id){
    console.log(elem_id);
    global = document.getElementById(elem_id);
    console.log(global);
    tagList = global.getAttribute('data-tags');
    console.log(tagList);
    facebook = global.getAttribute('data-fb');
    console.log(facebook);
    twitter = global.getAttribute('data-tt');
    console.log(twitter);
    gplus = global.getAttribute('data-gplus');
    console.log(gplus);
  }

+ image of console response.

Answer 1

A good solution would be to get the id attribute of 'a' element when clicking it put it in a var and use it to get data attributes.

Assuming 'a' elements are inside a div '#container' here is my solution

$('#container a').click(function(){
    var image_id    =   '#' + $(this).attr('id');
    var tagList     =   $(image_id).data('tags');
    var facebook    =   $(image_id).data('fb');
    var twitter     =   $(image_id).data('tt');
    var gplus       =   $(image_id).data('gplus');
});

Answer 2

not sure if I am understanding correctly. But if the id of the divs are consistent, meaning image-1, image-2, image-3,... and so on, you could use and expression selector and loop through the number of elements in that array to add/append your dynamic html inside those divs without using a click event to get the id. Ex -

var array_of_divs = $("div[id^=image-]") // this gives you an array of all the element having the id starting with 'image-'

further you can loop though the length of this array and add your dynamic html based on the id of the parent : ("image-"+counter_variable])

let me know if this helps.