title: Move selected element to the end
body: <p>We have HTML code</p>
  
  <pre><code>&lt;select id="mySelect"&gt;
   &lt;optgroup label="First group" id="firstGrp"&gt;
     &lt;option value="One"&gt;One&lt;/option&gt;
     &lt;option value="Two"&gt;Two&lt;/option&gt;
  &lt;/optgroup&gt;
   &lt;optgroup label="Second group" id="secondGrp"&gt;
     &lt;option value="Three"&gt;Three&lt;/option&gt;
     &lt;option value="Six"&gt;Six&lt;/option&gt;
     &lt;option value="Four"&gt;Four&lt;/option&gt;
     &lt;option value="Five"&gt;Five&lt;/option&gt;
   &lt;/optgroup&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I want to move <code>&lt;option value="Six"&gt;Six&lt;/option&gt;</code> to the end of <code>&lt;optgroup label="Second group" id="secondGrp"&gt;</code>.</p>
  
  <p>So, I select necessary element and remove it.</p>
  
  <pre><code>var secondGrp = d3.selectAll("#secondGrp option");
  var six = secondGrp.filter(function(d, i){ return d === "Six")})
  six.remove();
  </code></pre>
  
  <p>Unfortunately, I have no idea how to add it at the end of the <code>&lt;option value="Six"&gt;Six&lt;/option&gt;</code>.</p>