I have a button called "add_order_items" Which is used to display a list of products unique to that company. Right now it displays the proper values but it's appending the values to its parents continuously. Let's say a company has two products I click the add order item button it displays the proper 2 values. I click it again the new dropdown has the proper 2 values the first dropdown has appended the last 2 values so now it has 4 values (2 duplicates) I click the button a third time. The last dropdown has the proper 2 values. The middle dropdown has 4 values (2 duplicates) and the first one now has 6 values (4 duplicates). I have tried several approaches to keep this from happening. The first would be to add a counter and a conditional if counter == 0 do the normal append and save the dropdown else return the save dropdown. I could not get this to work Another solution which might be better it to compare the key if the key is already in the dropdown dont add it to the dropdown.
You're doing an append each time, so the new content will simply be appended to what's already there. If that's not what you want be sure to clear out the old values before appending the new ones.
The jQuery .empty() method will clear out all the children of a parent if that's what's needed.
If you only need to clear out what's been dynamically appended, an easy way would be to add a specific class, or custom attribute, to the appended entries. Then you can easily select them for removal before adding new ones.