title: Button Group Click Handler - How to get text content of clicked button?
body: <p>I am trying to set up two button groups. A click on any button in the second group should add a new button to the first group. The new button shall get the same label as the clicked button.</p>
  
  <p><code>var name = this.textContent</code> works if the click handler is attached to a single button. How do you get the text content of the clicked button when the click handler is instead attached to a group of buttons?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="group1"&gt;
      &lt;button&gt; nameA &lt;/button&gt;
      &lt;button&gt; nameB &lt;/button&gt;
    &lt;/div&gt;
    &lt;hr&gt;
    &lt;div id="group2"&gt;
      &lt;button&gt; nameC &lt;/button&gt;
      &lt;button&gt; nameD &lt;/button&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$('#group2').on('click', function(event) {
    var name = this.textContent   // wrong!
    var r = $('&lt;input type="button" value="' + name + '"&gt;');
    $("div#group1").append(r);
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/bogl/e5Lq4jjj/" rel="nofollow">JSFiddle Demo</a></p>