Ceci n'est pas un dropdown

<!DOCTYPE html>
<html>
  	<head>
    <title>Ceci n'est pas un dropdown</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	    <style media="screen">
			body{background-color:#fff1e0;font-size:16px;font-family:sans-serif;}
			#container{width:100%;height:100%;min-height:500px;}
			.ceci-nest-pas-un-dropdown{background-color:#e9decf;cursor:pointer;position:relative;font-size:14px;padding:1px 8px 3px 8px;border-radius:10px;border:1px solid #cec6b9;}
			.ceci-nest-pas-un-dropdown:hover{background-color:#cec6b9;}
			.ces-ne-sont-pas-des-options{border-radius:5px;background-color:#FFFCF7;position:absolute;padding:5px;}
			.ces-ne-sont-pas-des-options p{padding:5px;border-radius:5px;-webkit-margin-before:5px;-webkit-margin-after:5px;cursor:pointer;}
			.ces-ne-sont-pas-des-options p:nth-of-type(1){-webkit-margin-before:5px;}
			.ces-ne-sont-pas-des-options p:nth-last-of-type(1){-webkit-margin-after:5px;}
			.ces-ne-sont-pas-des-options p:hover{background-color:#FFF7EC;transition:0.3s;}
			#container > p{max-width:350px;padding:10px;line-height:21px;}
	    </style>
    <body>
    
    <div id="container">
	    <p>Here is a paragraph containing some <span id='a1' class='ceci-nest-pas-un-dropdown'>awesome spans that mimic dropdowns</span> which you can click on to bring up a list of possible replacements</p>
	    <p>Here is a second paragraph containing <span id='a2' class='ceci-nest-pas-un-dropdown'>plusieurs spans qui mimic des dropdowns</span> which you can click on to bring up a list of possible replacements</p>
	</div>
    
    <script charset="utf-8" type="text/javascript">
      	d3.select("#container").on("click",function(){
		    d3.select(".ces-ne-sont-pas-des-options").remove();
		    d3.selectAll(".ceci-nest-pas-un-dropdown").on("click",function(d,i){   dropIt(d3.select(this).attr("id").substring(1,2),d3.mouse(this));  
		       d3.event.stopPropagation();
		    });
		})
		
		var optionsData = [["awesome spans that mimic dropdowns","impostors claiming to be dropdowns","words and stuff"],["first thing","second thing","third thing"]];
		
		var functionsData = [[
			function(){console.log("First par, function 1")},
		    function(){console.log("First par, function 2")},
		    function(){console.log("First par, function 3")},
		],[
			function(){console.log("Second par, function 1")},
		    function(){console.log("Second par, function 2")},
		    function(){console.log("Second par, function 3")},
		]];
		
		function dropIt(elNum,coords){
		    var a1 = d3.select("#a" + elNum);
			// alert(d3.mouse(this))
		    var optionHolder = d3.select("#container").append("div")
		    	.on("click",function(){
					d3.event.stopPropagation();
		        })
		    	.attr({
		    		'class':'ces-ne-sont-pas-des-options'
		    	})
		    	.style({
		    		'left':(coords[0]) + 'px',
		        	'top':(coords[1] + a1.node().offsetTop) + 'px'
		    	});
		    
		    var notOptions = optionHolder.selectAll("p.not-an-option").data(optionsData[(+elNum)-1]).enter().append('p').html(function(d,i){return d});    
		    
		        d3.selectAll(".ceci-nest-pas-un-dropdown").on("click",function(d,i){    
		            d3.event.preventDefault(); 
		       		d3.event.stopPropagation();
		        });
		    
			notOptions.on("click",function(d,i){
		        functionsData[(+elNum)-1][i]();
		    	a1.html(d);
		        optionHolder.remove();
		        d3.selectAll(".ceci-nest-pas-un-dropdown").on("click",function(d,i){    
		            dropIt(d3.select(this).attr("id").substring(1,2),d3.mouse(this)); 
		       d3.event.stopPropagation();
		        });
		    });
		}
		
		d3.selectAll(".ceci-nest-pas-un-dropdown").on("click",function(d,i){    dropIt(d3.select(this).attr("id").substring(1,2),d3.mouse(this)); 
		       d3.event.stopPropagation();
		});
    </script>
    </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js