JSFiddle - React, Tailwind, and code Playground

by mahemoff

HTML

<select>
<option class='faces segment-heading'>--- Faces ----</option>
    <option>Andre</option>
    <option>The Rock</option>
    <option>Shawn Michaels</option> 
<option class='heels segment-heading'>--- Heels ----</option>
    <option>Iron Sheik</option>
    <option>Ric Flair</option>
    <option>Mr McMahon</option>  
</select>

CoffeeScript

$.fn.segment = (newOptions) ->
  $heading = $(this)
  $nextOption = $heading.next()
  while $nextOption.length and !$nextOption.hasClass('segment-heading')
    $oldOption = $nextOption
    $nextOption = $nextOption.next()
    $oldOption.remove()

  console.log 'checking'   
  return unless newOptions
  console.log newOptions
  console.log newOptions.reverse()
  $.each newOptions.reverse(), (i, $option) ->
    console.log 'adding', $option
    $heading.after $option

newFaces = [$('<option>Andre</option>'),$('<option>The Rock</option>')];
$('.faces').segment(newFaces)