Button overlapping & nested button issues

Question

Hi ppl
First up, here's my tiny sample project that i'm having issues with.
Issue #1: i plan to have an entire wall of the symbols that i created, so users can click on our mugshots to enlarge the image and see some contact details. Is there a way to always make the active(clicked) symbol appear on top of the rest? Right now it's locked in the default layer order in Edge.
Issue #2: Each symbol has its own mailto button nested in it which toggles on/off when its parent symbol is clicked. It works, BUT I cannot find a way to click that mailto button without activating the parent symbol's click event too.
Spaghetti code aside (i'm not a developer), i'd really appreciate any help with the above!
(Man it seems like i've been working on this forever *hysterical laughter*)

Answer 1

Hi,
Fix for Issue#1:
     a. Add sym.setVariable("count", 200); to compositionReady event handler.
     b. Then add the below code for click event handler for each symbol:
          var count = sym.getVariable("count");
          //console.log(count);
          sym.getSymbol("btn1").getSymbolElement().css({"z-index":count});   //use btn1 or btn2 accordingly for respective symbol
          sym.setVariable("count", count+1);
Fix for Issue#2:
     Add e.stopPropagation(); to click event handler for both symbol mailTo buttons which will prevent the event propagation from mailTo btn to its parent.
hope that helps,
Vivekuma