Bootstrap not being applied to dynamically created elements

I'm attempting to make a calculator where you have the possibility to increase the number of inputs if you so wish to - the calculator itself works fine in finding the necessary values, however I wish to also have the possibility to search through the dropdown inputs as they do get quite lengthy, hence why I am using bootstrap-select.

The problem is that only the default inputs get the bootstrap theme applied to them, whereas the inputs created by clicking on the necessary button don't get the theme applied. How do I go about fixing this?

What do you expect? All inputs to be 'stylised' like the default one, with the search menu etc. What do you get? Only the default input is 'stylised', whereas the ones created by clicking on the button don't

var i = 0;

function createGear() {
    i++;
    
    var container = document.getElementById("newGear");
    
    var gear = document.createElement("select");
    gear.id = "gear" + i;
    gear.setAttribute("class", "selectpicker");
    gear.setAttribute("data-live-search", "true");
    container.appendChild(gear);
    
    
    
    var none = document.createElement("option");
    none.value = "none";
    none.text = "";
    gear.add(none);
    
    
    
    
    var pistols = document.createElement("optgroup");
    pistols.label = "Pistols";
    gear.add(pistols);
    
    
    
    
    var pistol1 = document.createElement("option");
    pistol1.value = "pistol1";
    pistol1.text = "M1911";
    gear.add(pistol1);
    pistols.appendChild(pistol1);
    
    return i;
}

<!DOCTYPE html>
<html>
<head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
    <script src="js/script.js" type="text/javascript"></script>
</head>

<body>
    <form id="form">
        <select class="selectpicker" data-live-search="true" id="gear0">
                <option></option>
                <optgroup label="Pistols">
                    <option value="pistol1">M1911</option>
                </optgroup>
                </select>
        <div id="newGear">
            
        </div>
        <input type="button" onclick="createGear()" value="Create Gear Input!"> 
    </form>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>


</body>
</html>

Solution

That is because the select that you dynamically add to the page are never initialised as bootstrap-select components. The one that you've already got on the page is automatically initialised as such when the page loads because it has the selectpicker class.

You just need to add this statement after you add the new select to the page:

$(gear).selectpicker();