hop of those help? You must select the parent of the svg paths, usually a group element g and use a key function to identify your data points, so the enter() method will add only the new data, and the update() method will update existing paths. There is an example of that in the article Object Constancy explain this mechanism and have example code.
For through html elements and appending only appends to last element
Hope this helps The issue is because NameOption holds a reference to the option, hence if you append() it multiple times it will move between each parent element. To fix this you can either clone() the element when you append it:
var name = $(this).val();
$('#mainForm').find('.NameSelect').append('<option value="' + name + '" attrid="1">' + name + '</option>');
How to add jQuery element to the end of existing elements (instead of appending it to each)?