JSFiddle - React, Tailwind, and code Playground

by Wendy

HTML

<h2>Configure Your Plan:</h2>
    <div class="component_configuration" id="component_configuration">

        <div class="row" id="component_row_109264">
  <p class="left">
    <input id="components__component_id" name="components[][component_id]" type="hidden" value="109264" />
    <label class="component-label" for="component_allocated_quantity_109264">Apples</label><br>
    <p class="component-description"></p>

    <div style="float:left">
      <input class="quantity_component_number_field" id="component_allocated_quantity_109264" min="1" name="components[][allocated_quantity]" type="text" value="0" />
    </div>
    <div class="component-info"><span class="component-multiplier">x</span> <span class="component-price">$1.00</span> <span class="componentError" id="component_errors_109264"></span></div>
  </p>

  
</div>




        <div class="row" id="component_row_109266">
  <p class="left">
    <input id="components__component_id" name="components[][component_id]" type="hidden" value="109266" />
    <label class="component-label" for="component_allocated_quantity_109266">Bananas</label><br>
    <p class="component-description"></p>

    <div style="float:left">
      <input class="quantity_component_number_field" id="component_allocated_quantity_109266" min="1" name="components[][unit_balance]" type="text" value="0" />
    </div>
    <div class="component-info"><span class="component-multiplier">x</span> <span class="component-price">$0.25</span> <span class="componentError" id="component_errors_109266"></span></div>
  </p>

  
</div>



        <div class="row" id="component_row_109265">
  <p class="left">
    <input id="components__component_id" name="components[][component_id]" type="hidden" value="109265" />
    <label class="component-label" for="component_allocated_quantity_109265">Oranges</label><br>
    <p class="component-description"></p>

    <div style="float:left">
      <input class="quantity_component_number_field"...

JavaScript

var comp1 = $( "#component_row_109264" );
var comp2 = $( "#component_row_109266" );
var comp3 = $( "#component_row_109265" );
var comp4 = $( "#component_row_109267" );

comp3.insertBefore(comp2);
comp4.insertBefore(comp1);

// OR

//$( "#component_row_109265" ).insertBefore( $("#component_row_109266") );
//$( "#component_row_109267" ).insertBefore( $("#component_row_109264") );