After detach and appendTo elements are duplicated

Question

When I detach and then re-attach elements using detach and appendTo the elements are duplicated.

Edit : Added the ejs view that accompanies the javascript. Also wrapped the groceryItemsContainer with jQuery.

$groceryItems.appendTo( $('.groceryItemsContainer') );

Here is the ejs:

<div class="panel-group material_accordion" id="accordion" role="tablist" aria-multiselectable="true">
<div class="row accord" role="tab" id="headingFive">
    <h4 class="panel-title centerBlock">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true"
           aria-controls="collapseFive">
            Highest Rated Grocery Items<span style="margin-left: 1em" id="chevron_toggleable_five" class="chevron_toggleable glyphicon glyphicon-chevron-right"></span>
        </a>
    </h4>
</div>
<div id="collapseFive" class="panel-collapse collapse material_accordion_collapse" role="tabpanel"
     aria-labelledby="headingFive">
    <div class="panel-body">
        <div class="container">
            <% if (giInStore.length !== 0) { %>
            <div class="alignCenter">
                <div class="btn-group">
                    <button type="button" onclick="sortByAvgRating()" class="btn btn-primary starSRating">Stars</button>
                    <button type="button" class="btn btn-primary flavor">Your Flavor</button>
                </div>
            </div>

            <% giInStore.forEach(function(eachResult, index) { %>
            <div class="groceryItemsContainer">
                <div class="row groceryItems">
                    <div class="name col-xs-4 col-sm-4 col-md-4 alignCenter">
                     <p><%= eachResult.groceryItemName %></p>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 rating-stars-container alignCenter ">
                        <% if (eachResult.avgRating !== null) { %>
                            <div class="rating-stars inline-flex-block">
                                <div name="avgStarRating" class="ratebox" data-id="mRating-<%=index %>" data-rating="<%= eachResult.avgRating %>"></div>
                                <span class="green">(<%= eachResult.count ? eachResult.count : '0' %>) </span>
                            </div>
                        <% } %>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 alignCenter">
                        <% if (eachResult.minRatedPrice || eachResult.maxRatedPrice)  { %>
                            <% if(eachResult.minRatedPrice === eachResult.maxRatedPrice) { %>
                            <p>$ <%= eachResult.minRatedPrice %> </p>
                            <% } else { %>
                            <p>$ <%= eachResult.minRatedPrice %> - $ <%= eachResult.maxRatedPrice %></p>
                            <% } %>
                        <% } else { %>
                            <p> - </p>
                        <% } %>
                    </div>
                </div>
            </div>
            <% }) %>
            <% } else { %>
                <div class="text-center">
                    <p>"No grocery items have been rated yet." </p>
                </div>
            <% } %>
        </div>
    </div>
</div>

Here is the javascript:

<script>

function sortByAvgRating() {

var $groceryItems = $('.groceryItems');// grab all of the grocery items

$groceryItems.detach();// detach the elements from the DOM

$groceryItems.sort(function(a, b) {// sort the grocery items by the rating attribute
    return +a.children[1].children[0].children[0].dataset.rating - +b.children[1].children[0].children[0].dataset.rating;
});

$groceryItems.appendTo( $('.groceryItemsContainer') );// apppend the sorted array of elements to the DOM inside the groceryItemsContainer.  The problem is there are now double the number of original elements.  

</script>

Answer 1

You may want to check the jQuery documentation on detach .

Specifically, this part of the example:

var p;
$( "button" ).click(function() {
  if ( p ) {
    p.appendTo( "body" );
    p = null;
  } else {
    p = $( "p" ).detach();
  }
});

EDIT: From the viewpoint of the code you provided, it seems that it should work. Please add more code so that we can diagnose your problem.