Initialize Hammer.js for all elements with the same identifier

Question

I want to use hammer js to create a double Tab gesture for a similar message. Html:

<div class="gitem-wrap row">
      <div class="gitem">
        <div class="well">
            <figure id="img-item"><img src="images/2.jpg" class="img-responsive"></figure>
            <article>
                ...
            </article>
        </div>
      </div>
      <div class="gitem">
        <div class="well">
            <figure id="img-item"><img src="images/2.jpg" class="img-responsive"></figure>
            <article>
                ...
            </article>
        </div>
      </div>
</div>

Js to initialize Hammer js:

var myElement = document.getElementById('img-item');
var mc = new Hammer(myElement);
mc.on("doubletap", function() {
    //myElement.toggleClass('liked');
    console.log('Double tap!');
    return false;
  });

it only works for the first item, but not for everyone.
How can I initialize Hammer js for all elements with the same identifier?

JSFIDDLE : http://jsfiddle.net/ekdfokc5/

Thanks for the help. its work is great in hammer.js v1
http://jsfiddle.net/ekdfokc5/3
 but in the new version (2.0.4) there is a problem, and $('figured').toggleClass('liked')does not work after double-clicking.
http://jsfiddle.net/ekdfokc5/4

Answer 1

( ). . , class/TagName.

MDN: Element.id:

$('figure').each(function(){   //tagname based selector
    var mc = new Hammer(this);
    mc.on("doubletap", function() {
        console.log('Double tap!');
        alert('Double tap!');
        //$(myElement).toggleClass('liked');
        return false;
    });
});

Fiddle

_{jQuery, jQuery}

.

<figure class="img-item">

---

$('.img-item').each(function(){
    var $this = $(this);
    var mc = new Hammer(this);
    mc.on("doubletap", function() {
        console.log('Double tap!');
        alert('Double tap!');
        $this.toggleClass('liked');
        return false;
    });
});

$(this).toggleClass('..') , this on() hammer, .