span copy

trying to copy a span to clipboard thru jqueryui menu

HTML

<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.5/clipboard.min.js"></script>
<!-- HTML code -->
<div id='maindiv_id'>

  <h2>about</h2>
  <p>
    This uses <a href='http://clipboardjs.com/'>clipboard.js</a> by Zeno Rocha, <a href='http://jquery.com'>JQuery 2.2</a>, <a href='http://jqueryui.com/'>JQueryUI</a> 1.11 menus. The real program motivating this is the <a href='https://github.com/bstarynk/melt-monitor-2015'>MELT monitor</a>    (GPLv3 licensed) on <tt>github</tt>. In that program, the relevant <span class='momitemref_cl'>words</span> are in fact some kind of identifiers or variables.
  </p>

  <hr/>
  <h2>demo</h2>
  <p>Some <span class='momitemref_cl'>words</span> here <span class='momitemref_cl'>are</span> in <span class='momitemref_cl'>red</span> &amp; <span class='momitemref_cl'>italics</span> (in HTML5 <span class='momitemref_cl'>they</span> are <tt>span</tt>-s
  of <tt>class='momitemref_cl'</tt>); right-mouse-click on <span class='momitemref_cl'>them</span>, a dynamically generated <span class='momitemref_cl'>menu</span> (a JQueryUI <span class='momitemref_cl'>one</span>) should appear. If you choose <tt>Hilight</tt> in that <span class='momitemref_cl'>menu</span>, every occurence of that
    word should be hilighted. If you choose <tt>Copy</tt>, the word should be selected and copied to the clipboard. BTW, a few <span class='momitemref_cl'>words</span> may occur several times in <span class='momitemref_cl'>red</span>, <span class='momitemref_cl'>they</span>    would hilight together.</p>
</div>

<hr/> See <a href='http://stackoverflow.com/q/35340862/841108'>my question</a> on StackOverflow.
<br/>
<br/> Maybe I should have a different approach.
<br/> Perhaps I should use <tt>contextmenu</tt>-s.

CSS

/* CSS code */

body {
  font-size: 90%;
}

span.momitemref_cl {
  color: darkred;
  font-family: Helvetica;
  font-style: oblique;
}

span.momhilight_cl {
  background-color: orange;
  border: 2px dotted green;
}

span.momitemref_cl:hover {
  color: red;
  font-family: Helvetica;
  font-style: oblique;
  background-color: yellow;
  border: 1px dotted #340939;
}

ul.mommenu_cl {
  color: navy;
  align-items: flex-start;
  position: absolute;
  width: auto;
  display: table;
  /* see http://stackoverflow.com/a/34753674/841108 */
}

JavaScript

/// javascript code
var $clipboardh = false;
var $maindiv;
var mom_menuitemcount = 0;
var mom_menuitem = null;

// destroy the menu
function destroy_menu() {
  if (!mom_menuitem) return;
  console.log("destroy_menu mom_menuitem=", mom_menuitem);
  $(mom_menuitem).menu("destroy"); // destroy the JqueryUI menu
  mom_menuitem.remove(); // remove it from the DOM
  mom_menuitem = null; // forget it for the GC
  $clipboardh.destroy();
  $clipboardh = false;
}

console.log("before make_menu");

// make a menu for the given span
function make_menu(spa) {
  console.log("make_menu spa=", spa);
  var name = $(spa).text();
  mom_menuitemcount++;
  var menuid = "menuid_" + mom_menuitemcount;
  console.log("make_menu name=", name, " menuid=", menuid);
  $maindiv.after("<ul class='mommenu_cl' id='" + menuid + "'>"
               + "<li class='ui-state-disabled'>* <i>" + name + "</i> *</li>"
    // the text inside the following <li> matters
    + "<li>Hilight</li>" + "<li class='copy' data-clipboard-text='" + name + "'>Copy</li>" + "</ul>");
  if ($clipboardh == false){
    console.log("creating the clipboard");
  	$clipboardh = new Clipboard('.copy');
    
    $clipboardh.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);

        e.clearSelection();
    });

    $clipboardh.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
  } 
  var mymenu = $('#' + menuid);
  mymenu.menu({
    select: function(ev, ui) {
      var uitem = ui.item;
      var utext = uitem.text();
      console.log("mymenu-select ev=", ev, " ui=", ui, " name=", name,
        " uitem=", uitem, " utext=", utext);
      switch (utext) {
        case "Hilight":
          $maindiv.find(".momitemref_cl").each(function(ix, el) {
            var etext = $(el).text();
            console.log("hilighting el=", el, " etext=", etext);
           ...