I have a select option with an <a> link like this:

<select id="varUsage" class="form-control">
    <option value="weight">Weight</option>
    <option value="color">Color</option>
    <option value="quality">Quality</option>
</select>

<a id="submitUsage" class="btn btn-primary btn-lg">Add</a>

Now I made this onclick function for when users click on Add:

$("#submitUsage").click(function(){
    var selectedUsage = $("#varUsage").val();
    $('#' + selectedUsage).removeAttr( 'style' );
});

So it basically picks the value of select input as selectedUsage variable and removes the style attribute of a div that has same id value.

So basically the default overview of divs goes like this:

<div id="weight" style="display:none">
....
</div>

<div id="color" style="display:none">
....
</div>

<div id="quality" style="display:none">
....
</div>

Now this function works fine only for id="weight" div. So when users choose Weight option from select menu list, the div with of weight appears properly on screen.

But this does not work for the other two options and their related divs are still hidden when they're selected.

So what's going wrong here?

How can I properly show custom div when it's selected in select option and then user pressed on the Add link?