Help making script work when element is not in two containers

JavaScript
1

Currently this multi-touch gesture script works with and html element in two containers.

Can someone help me get it working so that it works with no containers and so that the element itself has a class and this gesture is applied to everything in that class?

Here is the URL where the script works with two containers: https://googledrive.com/host/0BwJVaMrY8QdccFUzWFNfcUdJbDQ/pinch.html

Here is the script:

var hammertime = Hammer(document.getElementById('pinch1'), { transform_always_block: true,      transform_min_scale: 1, drag_block_horizontal: true, drag_block_vertical: true, drag_min_distance: 0 });

var posX=0, posY=0, lastPosX=0, lastPosY=0, bufferX=0, bufferY=0, scale=1, last_scale,    rotation= 1, last_rotation, dragReady=0;

hammertime.on('touch drag dragend transform transformend', function(ev) { elemRect = document.getElementById('pinch2'); manageMultitouch(ev); });

function manageMultitouch(ev){
    switch(ev.type) {
        case 'touch':
            last_scale = scale;
            last_rotation = rotation;

            break;

        case 'drag':
            posX = ev.gesture.deltaX + lastPosX;
            posY = ev.gesture.deltaY + lastPosY;
            break;

        case 'transform':
            rotation = last_rotation + ev.gesture.rotation;
            scale = Math.max(0.5, Math.min(last_scale * ev.gesture.scale, 10));
            break;

        case 'dragend':
           lastPosX = posX;
           lastPosY = posY;
           break;

        case 'transformend':
           scale = 1.0;
           break;
        }

        if(scale <= 0.5) alert('scale is less than 0.5');
        if(scale > 1.0) alert('scale larger than 1.0');

        var transform =
        "translate3d(0px,0px, 0) " +
        "scale3d(1,"+scale+", 0) " +
        "rotate(0deg) ";

        elemRect.style.transform = transform;
        elemRect.style.oTransform = transform;
        elemRect.style.msTransform = transform;
        elemRect.style.mozTransform = transform;
        elemRect.style.webkitTransform = transform;
}

Here is the changes I have made in an attempt to get it working with no containers and a class on the element:
Here is the site: https://googledrive.com/host/0BwJVaMrY8QdcUnNIbDREdGFRdEk/pinch.html
Here is the code:

var hammertime = Hammer(document.body, { transform_always_block: true, transform_min_scale: 1, drag_block_horizontal: true, drag_block_vertical: true, drag_min_distance: 0 });

    var posX=0, posY=0, lastPosX=0, lastPosY=0, bufferX=0, bufferY=0, scale=1, last_scale, rotation= 1, last_rotation, dragReady=0;

    hammertime.on('touch drag dragend transform transformend', '.dataCard', function(ev) { manageMultitouch(ev, $(this)); });

    function manageMultitouch(ev, elemRect){
    switch(ev.type) {
    case 'touch':
    last_scale = scale;
    last_rotation = rotation;

    break;

    case 'drag':
    posX = ev.gesture.deltaX + lastPosX;
    posY = ev.gesture.deltaY + lastPosY;
    break;

    case 'transform':
    rotation = last_rotation + ev.gesture.rotation;
    scale = Math.max(0.5, Math.min(last_scale * ev.gesture.scale, 10));
    break;

    case 'dragend':
    lastPosX = posX;
    lastPosY = posY;
    break;

    case 'transformend':
    scale = 1.0;
    break;
    }

    if(scale == 0.5) alert('scale is less than 0.5');
    if(scale < 1.0) alert('scale larger than 1.0');

    var transform =
    "translate3d(0px,0px, 0) " +
    "scale3d(1,"+scale+", 0) " +
    "rotate(0deg) ";

    elemRect.style.transform = transform;
    elemRect.style.oTransform = transform;
    elemRect.style.msTransform = transform;
    elemRect.style.mozTransform = transform;
    elemRect.style.webkitTransform = transform;
    }

Why doesn’t the latter work ( it has no errors )? How can I get this working with no containers containing the element and hammer applied to the class that is an attribute of the element.