Hide Mesh Overlap But Still Display Non-Overlapping Mesh

I have 2 3D objects of clothing items (as seen in the pictures). Without scaling, how can I hide the black jacket under the blue hoodie so that all parts where the black hoodie overlap the blue would not show up. Ideally, if I was to unzip the hoodie, only the front side of the black jacket can be seen (where the blue hoodie is no longer covering the black jacket). I apologize if it’s a little confusing; you can just imagine how you would layer a jacket over a hoodie/shirt in real life --that’s all I’m trying to achieve here.

I followed this example: http://jsfiddle.net/Horsetopus/33623mpv/ and got the blue hoodie to show up in front of the black jacket. But all this does is render the blue hoodie in front without actually hiding the jacket. I’m new to three.js so I would really appreciate the help.