Why does the jQuery.index () method only work for the first element in the collection when a selector is specified?

I am trying to create a table by adding values ​​from textbox fields in tfoot

the same table. The ultimate goal is to be able to then embed edits on previously added lines, while still allowing more lines to be added.

I have the following markup:

<table>
    <thead>
        <tr>
            <th>Service</th>
            <th>Protocol</th>
            <th>Source Port</th>
            <th>Destination Port</th>
            <th>Action</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>
                <input type="text" data-function="service" value="foo" />
            </td>
            <td>
                <input type="text" data-function="protocol" value="bar" />
            </td>
            <td>
                <input type="text" data-function="sourcePort" value="baz" />
            </td>
            <td>
                <input type="text" data-function="destPort" value="fob" />
            </td>
            <td>
                <button id="addBtn" type="button">Add</button>
            </td>
        </tr>
    </tfoot>
</table>

      

        
        
        
      

    

The following script stored all the elements input[type=text]

in tfoot

a variable input. From there I try to use .index()

to identify and then get the value of each textbox:

$(document).ready(function () {
    $('#addBtn').click(function (e) {
        var inputs = $(this).closest('tfoot').find('input[type=text]');
        console.log(inputs);

        var serviceIndex = inputs.index('[data-function="service"]');
        console.log(serviceIndex);
        console.log(inputs[serviceIndex].value);

        // the remaining indexes all return -1

        var protocolIndex = inputs.index('[data-function="protocol"]');
        console.log(protocolIndex);
        console.log(inputs[protocolIndex].value);

        var sourcePortIndex = inputs.index('[data-function="sourcePort"]');
        console.log(sourcePortIndex);
        console.log(inputs[sourcePortIndex].value);

        var destPortIndex = inputs.index('[data-function="destPort"]');
        console.log(destPortIndex);
        console.log(inputs[destPortIndex].value);
    });
});

      

        
        
        
      

    

Unfortunately, the selector data-function="X"

only works for service. All other selectors return -1

indicating that the value was not found. The above code is from a jsFiddle which illustrates the issue . I am not tied to using the index, but cannot use the element id

as I need a more general solution.

Why does the jQuery.index () method only work for the first element in the collection when a selector is specified?