I wrote a drop-down list plug-in with bugs. Could you please advise?

I wrote a drop-down list plug-in with bugs. Could you please advise?

Frontend UI sharing

; (Function ($) {$. fn. drowDowEditor = function (opts) {opts = jQuery. extend ({panel :$ (this), data: null}, opts ||{}); return this. each (function () {var panelID = opts. panel [0]. id; // -------- drop-down container ------------ var dropdownPanelHtml = ''; $ (dropdownPanelHtml ). insertAfter (opts. panel); var dropdownPanel = $ ("# drop_down_editor_panel" + panelID); // ---------------------------- // use DIV to locate the textbox and the drop-down container var container = ''; $ (container ). insertBefore (opts. panel); var editorContainer =$ ("# drop_down_editor_container" + panelID); opts. panel. appendTo (editorContainer); dropdownPanel. appendTo (editorContainer); opts.panel.css ("float", "left"); // -------- Add the drop-down button ----------- var button = ''; $ (button ). insertAfter (opts. panel); // --------------------------------- dropdownPanel.css ("top", "30px"); dropdownPanel.css ("left", "6px"); dropdownPanel. hide (); for (var I = 0; I <opts. data. length; I ++) {var dataItem = ''+ opts. data [I]. key + ''; dropdownPanel. append (dataItem);} dropdownPanel. find (". drop_item "). click (function () {alert (opts. panel [0]. id); opts.panel.val((%(this%.html () ;}); $ (". drop_item: odd "). mouseenter (function () {detail (this).css ("background-color", "# emerge 1b0") ;}); $ (". drop_item: odd "). mouseleave (function () {detail (this).css ("background-color", "white") ;}); $ (". drop_item: odd ").css (" background-color "," white "); opts. panel. click (function (e) {e. stopPropagation (); dropdownPanel. width (opts. panel. width () + 15 + 14); dropdownPanel. slideDown (300) ;}); $ (document ). click (function () {dropdownPanel. slideUp (300) ;}); opts.panel.css ("clear", "both") ;}}) (jQuery );

123123

$ ("# Dropdown "). drowDowEditor ({data: [{"key": "Baidu", "value": "www.baidu.com" },{ "key": "Sina", "value ": "www.sina.com.cn" },{ "key": "test", "value": "test.com" },{ "key": "blog", "value ": "cnblog.cn"}]}); $ ("# dropdown1 "). drowDowEditor ({data: [{"key": "Baidu 1", "value": "www.baidu.com" },{ "key": "Sina 1", "value ": "www.sina.com.cn" },{ "key": "test", "value": "test.com" },{ "key": "blog Garden 1", "value ": "cnblog.cn"}]});

Effect:

<喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + CjxpbWcgc3JjPQ = "http://www.2cto.com/uploadfile/Collfiles/20140827/20140827084910156.png" alt = "">

If you only render a basic rendering, and if there are multiple rendering, the overwriting problem occurs,

I am new to the web. I hope you can give more advice. Frontend sharing