title: How to get text right above select box?
body: <p>I had to change some information up on a working site and now I can't seem to find out what I did wrong.</p>
  
  <p>I have a simple jQuery script that is suppose to take the price(data-price) and calculate the options they select. That works fine; however it's suppose to take the text information right above it and add it to the summary after they choose their options as a summary. </p>
  
  <p>I am not very good with jquery and I tried putting this up as a fiddle but for whatever reason I couldn't get it to work at all so hope this will suffice. </p>
  
  <p><strong>jquery</strong></p>
  
  <pre><code>var $selections = $('#selections');
  var $selects = $("select").change(function () {
      var total = 0;
      $selections.empty();
      $selects.each(function () {
          var $selected = $(this).find("option:selected");
          var price = parseFloat($selected.data("price")) || 0;
          total += price;
          if($selected.val() !== ''){
              $('&lt;li /&gt;', {
                  text: $selected.text() + $(this).parent().clone().children().remove().end().text()+" " + $selected.data("price")
              }).appendTo($selections)
          }
      })
      $(".summary").text('Est. Total $' + total);
  })
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>Areas - Selected:&lt;br /&gt;
  &lt;select name="rooms" id="Areas"&gt; 
           &lt;option value=""&gt;Select Rooms..&lt;/option&gt;                           
           &lt;option data-price="5" value='1'&gt;10&lt;/option&gt;
   &lt;/select&gt;
  
  &lt;h3 class="summary" data-price="0"&gt;Est. Total $0&lt;/h3&gt;
     &lt;div class="well"&gt;
          &lt;h4&gt;Breakdown:&lt;/h4&gt;
           &lt;ul id="selections"&gt;&lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The output would look like:</strong></p>
  
  <pre><code>10 Area - selected: 5
  </code></pre>
  
  <p><strong>Now it looks like</strong></p>
  
  <pre><code>10 5
  </code></pre>
  
  <p>So the text right above the select box is not being selected. I know it's in this code here:</p>
  
  <pre><code>text: $selected.text() + $(this).parent().clone().children().remove().end().text()+" " + $selected.data("price")
  </code></pre>
  
  <p>I just don't really understand what it's doing and how when I removed div's from legacy code would effect it.</p>
  
  <p><strong>[EDIT]</strong></p>
  
  <p>I found out it's not working due to adding Selectric.js to my drop-downs. here is what the output is now.</p>
  
  <pre><code>        &lt;div class="selectricWrapper"&gt;&lt;div class="selectricHideSelect"&gt;&lt;select id="Areas" name="rooms"&gt; 
      &lt;option value=""&gt;Select Areas&lt;/option&gt;                                                      &lt;option value="1" data-price="8.95"&gt;1&lt;/option&gt;
          &lt;option  value="2"dataprice="17.90"&gt;2&lt;/option&gt;                                &lt;option value="3" data-price="26.85"&gt;3&lt;/option&gt;
              &lt;option value="4" data-price="35.80"&gt;4&lt;/option&gt;                             &lt;option value="5" data-price="39.95"&gt;5&lt;/option&gt;
  &lt;option value="6" data-price="53.70"&gt;6&lt;/option&gt;
  &lt;option value="7" data-price="69.95"&gt;8&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="selectric"&gt;
          &lt;p class="label"&gt;3&lt;/p&gt;&lt;b class="button"&gt;▾&lt;/b&gt;
          &lt;/div&gt;
          &lt;div class="selectricItems" style="width: 298px; display: none;"&gt;
          &lt;ul&gt;
          &lt;li class=""&gt;Select Areas..&lt;/li&gt;
          &lt;li class=""&gt;1&lt;/li&gt;
          &lt;li class=""&gt;2&lt;/li&gt;
          &lt;li class="selected"&gt;3&lt;/li&gt;
          &lt;li class=""&gt;4&lt;/li&gt;
          &lt;li class=""&gt;5&lt;/li&gt;&lt;li class=""&gt;6&lt;/li&gt;
          &lt;li class="last"&gt;8&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>How could I change my jquery up to account for the selectric.js?</p>