Add new value on Select2 with JS

I need a menu that allows me to search, create and modify values of a related table, the table is called: values Values of select2 ID NAME 1. Gren 2. Red ______ Agregar nuevo valor desde el menú select2 Add new value from the select2 menu Example 3 Blue The search should show more than 10 thousand records without searching the search. In stage 1: The value is searched, if it does not exist, an option of + add appears In stage 2: An input appears in the menu to add the new value In stage 3: Click on the Save button to save the value in the menu In stage 4: Edit and save menu values in the related table. The example must be show the values of a table, select the value name, save the id and show the data of a related table in the menu. Example: <script type="text/javascript"> $('.dx').select2({ placeholder: 'Select dx', ajax: { url: '[login to view URL]', dataType: 'json', delay: 250, processResults: function (data) { return { results: data }; }, cache: true }, templateResult: function(state) { if (![login to view URL]) // the ADD don't have id return $("<div id='newstate' style='display:none;'><span><input type='text' id='textbox'></span><span><button id='save'>SAVE</button></span></div><b class='btn-select-add'>" + [login to view URL] + "</b>"); else return [login to view URL]; } });