how to check if two divs are touching each other?

Question

i m trying to make a webpage that looks like a game. I used html, css, javascript, jquery and php in it. I want my Mario to touch my other objects such as shops (which comes from databse) and a popup box should appear on touching shops. I am using collision function of javascript but its not working. can anybody help me with that. here is my code:

        function collision($store, $mario) {
        alert("hello");
        var x1 = $("$store").offset().left;
        var y1 = $("$store").offset().top;
        var x2 = $("$mario").offset().left;
        var y2 = $("$mario").offset().top;
        var h1 = $("$store").outerHeight(true);
        var w1 = $("$store").outerWidth(true);
        var h2 = $("$mario").outerHeight(true);
        var w2 = $("$mario").outerHeight(true);
        var b1 = y1 + h1;
        var r1 = x1 + w1;
            var b2 = y2 + h2;
            var r2 = x2 + w2;
            if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) {
              return false;}
            else{
              return true;
            }
      };
});  
var state =document.getElementById('state');
      if (collision($('.store'),$('.mario'))){
        state.innerText="Touching !!!";
      }  
      else {
        state.innerText="No collision";
      }
      alert(state.innerText);

    }