JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a" class="grp1">id=a, class=grp1</div>
  <div id="b" class="grp1">id=b, class=grp1</div>
  <div id="c" class="grp2">id=c, class=grp2</div>
  <div id="d" class="grp2">id=d, class=grp2</div>
  <div id="e" class="grp2">id=e, class=grp2</div>
  <div id="f" class="grp1">id=f, class=grp1</div>

  <table class="test_results_table" border="1">
    <tr><th>test</th><th>Expected</th><th>Actual</th><th></th></tr>
    <tr id="test1">
        <td class="test_name">grp1_divs.concat(grp2_divs);</td>
        <td class="expected_result"></td>
        <td class="actual_result"></td>
        <td class="test_result"></td>
    </tr>
    <tr id="test2">
        <td class="test_name">jQuery.unique(all_divs);</td>
        <td class="expected_result"></td>
        <td class="actual_result"></td>
        <td class="test_result"></td>
    </tr>
    <tr id="test3">
        <td class="test_name">grp1_divs.concat(detached.get());</td>
        <td class="expected_result"></td>
        <td class="actual_result"></td>
        <td class="test_result"></td>
    </tr>    
    <tr id="test4">
        <td class="test_name">jQuery.unique(all_divs);</td>
        <td class="expected_result"></td>
        <td class="actual_result"></td>
        <td class="test_result"></td>
    </tr>
  </table>

CSS

.grp1 {color: red}
  .grp2 {color: blue}


table.test_results_table td {padding: 5px}

JavaScript

function run_test(test_id, element_array, expected_order_array) {
        $("#test" + test_id + " > .expected_result").html(expected_order_array.toString());
    
        var result_array = [], i = 0;
        for(var i; i < element_array.length; i++) {
            result_array[i] = element_array[i].id;
        }
        
        $("#test" + test_id + " > .actual_result").html(result_array.toString());
        
        if(result_array.toString() === expected_order_array.toString()) {
            $("#test" + test_id).css('background-color', '#99FF66').find('.test_result').html('success');
        } else {
            $("#test" + test_id).css('background-color', 'red').find('.test_result').html('fail');
        }
    }



    var grp1_divs = $(".grp1").get(); 
    var grp2_divs = $(".grp2").get(); 

    var all_divs = grp1_divs.concat(grp2_divs); // expect order of a,b,f,c,d,e - true in 1.4.2
    run_test(1, all_divs, ['a', 'b', 'f', 'c', 'd', 'e']);
    
    all_divs = jQuery.unique(all_divs); // expext order of a,b,c,d,e,f - true in 1.4.2
    run_test(2, all_divs, ['a', 'b', 'c', 'd', 'e', 'f']);

    
    var detached = $(".grp2").detach();
    all_divs = grp1_divs.concat(detached.get()); // expect order of a,b,f,c,d,e - true in 1.4.2
    run_test(3, all_divs, ['a', 'b', 'f', 'c', 'd', 'e']);
    

    all_divs = jQuery.unique(all_divs); // expext order of ??? 
    run_test(4, all_divs, ['a', 'b', 'f', 'c', 'd', 'e']);