JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">Don't click me</a><br/>
<a href="mailto:first@tempinbox.com" href2="mailto:second@tempinbox.com" href3="mailto:third@tempinbox.com">Click me!</a>

CSS

/*prevent these iframes from being visible*/
iframe.mailto-iframe{display:none;}

/*bonus: style your protocol-specific links*/
a[href^="mailto:"] {padding-left:20px;background:url(http://sstatic.net/stackoverflow/img/favicon.ico) no-repeat;}

JavaScript

$('a[href^="mailto:"]').bind("click", function(e){
    //cache "this" link element jquery reference
    $this=$(this);
    
    //remove "helper" iframes if any, you don't want to end up with 300 iframes by accident!
    $("iframe.mailto-iframe").remove();
    
    //go wild... you could have a nice loop as you're not limited to 3 hrefs
    openMailto($this.attr("href"));
    openMailto($this.attr("href2"));
    openMailto($this.attr("href3"));
    
    //processing href2 and href3 before allowing the default action to happen first would be counter-intuitive
    e.preventDefault();
    return false;
});
function openMailto(s){
    if (s) $("<iframe />", {src:s, class:"mailto-iframe"}).appendTo("body");
}