Unable to select from an added list of selections

Question

So as of now I have a selection that adds text every time a user inputs the information and the list is correctly populating.

My HTML that produces the selection list is here:

<div id="weight-wrap" data-value="1">
    <span class="gameStatLabel">Weight</span>

        <div class="vElement-wrap vSelect weight-select">
        <div class="selectInput"></div>
        <div id="optionWeight" class="optionWrap"></div>
        <button class="selectDrop">▼</button>
        </div>
</div>

I didn't use the select and option method because it was only populating the div and not showing it on the selection drop down.

As for the code that I use to populate the HTML above or my optionWeight div this is what I used to successfully populate it but am unable to select the options I created because my selectInput class is not changing on the action of clicking it.

players = match.players;

var options = [];
//options.push('<div class="vOption" value=select>' + "Select" + '</div>');

$.each(players,
    function(index)
    {
        player = players[index];
        options.push('<div class="vOption" value='+index+'>' + player['weightClass'] + " lbs" + '</div>');
    }
);

$('#optionWeight').html(options.join(''));
$('#optionWeight').trigger('change');

It is also worth noting that if I were to uncomment out the code above it will create a selection dropdown displaying "Select" and I am able to select it but once the user were to insert data values to populate more selections, everything including "Select" will not be able to be selected even though the clicking cursor is being displayed.