Select is not converted to Select2 in dynamically created element

How Do I...
#1

The div with id of ‘attributes’ is static.
All the element inside it are dynamically created.

When the div with id ‘add-color’ is clicked,
then the div of id ‘showform’ becomes visible on the page.

Problem is, the select element with id of ‘addnewcolor’ is not converted to select2.
I am also using the select2 bootstrap theme.

<div id="attributes">
       <div class="right fake-link" id="add-color">Add color</div>;

         <div class="form-group row" id="showform" style="display:none">    
            <label class="col-xs-3 col-form-label" style="">Color:</label>
            <div class="col-xs-7">
                <select id="addnewcolor" name="attributes[color]">
                    <option value="AL" style="background:green;">Green</option>
                      ...
                    <option value="WY" style="background:red;">Red</option>
                </select>
             </div>
     </div></div>
#2

I need some more details to diagnose your issue.

What do you mean by “becomes visible”?
Can you provide the JavaScript that makes the “showform” DIV visible (i.e., the click handler for the “add-color” DIV?) (As an aside, I also question why you’re faking a link instead of using an actual hyperlink; if accessibility for screen readers or keyboard users is a concern, then your current solution will not work for those users.)

Also, when do you initialize the Select2 widget—before, or after “#showform” becomes visible?
Can you provide the JavaScript that initializes the Select2 widget?