dynamically change size of multi-type elements

Question

I'm writing a script that is supposed to resize filtering-inputs based on width of a gridviews columns. It used to be only textboxes and I got it to work somewhat fine:

the script:

$("#<%= myGridView.ClientID %> th").each(function (index) {
    $('input[type="text"]:eq(' + index + ')').css('width', $(this).width() + 1.5);
    $('input[type="text"]:eq(' + index + ')').css('padding', '0');
});

Then It turned out that col-number 5 can only be a set ammount of values and should therefore be a dropdown list. So i figured I'd do something like this:

$("#<%= myGridView.ClientID %> th").each(function (index) {
    if (index === 5) {
        $('select').css('width', $(this).width() + 1.5);
        $('select').css('padding', '0');
    }
    else {
        $('input[type="text"]:eq(' + index + ')').css('width', $(this).width() + 1.5);
        $('input[type="text"]:eq(' + index + ')').css('padding', '0');
    }
});

Here is the result:

As you can see, not quite what I wanted. Anyone know what I'm doing wrong?

ASP was requested:

--><input type="text" id="id1"/><!--Comments are needed to get rid of whitespace between text boxes
     --><input type="text" id="id2" /><!--
     --><input type="text" id="id3"/><!--
     --><%/*<input type="text" id="id4" />*/ %>
        <select>
            <option value="blank"></option>
            <option value="True">True</option>
            <option value="False">False</option>
        </select><!--
     --><input type="text" id="id5" /><!--
     --><input type="text" id="id6"/>
        <input type="button" id="clearFilters" value="Clear filters" style="position: relative; top: -3px; height: 19px; "/>
        <br />
        <asp:GridView ID="myGridView" runat="server" blablabla>etc.etc.</asp:GridView>

Answer 1

Try changing index == 5 by index == 4 as index is zero based.

It seems there could be something else wrong, but probably we could help better if we see the html.