Undefined element form array

Question

How can Google Chrome return undefined when jQuery logs the elment when using $("#panel :input") ?

I would like to access the matchrule_match element via jQuery, in this case the first entry and activate the materialize select box.

console.log($('#matchrule_match[1]').attr('id'));

also returns undefined.. why?

HTML as shown in Chrome (not from source):

<div id="matchrules" class="card-panel">
    <div class="row">
        <div class="col s6">
            <h4 class="header2">Matchregels</h4>
            <h5 class="header2" style="margin-top: -10px; color: #ff4081 !important; font-size: 13px !important">
                Maximaal 8 producten per pakbon</h5>
        </div>
        <div id="addbutton" class="input-field col s6">
            <a class="btn-floating btn-small waves-effect waves-light red" style="float: right" tabindex="6">
                <i class="mdi-content-add">
                </i>
            </a>
        </div>
    </div>
<div class="row"> <div class="row"> <div class="input-field col s2"> <select id="matchrule_match[1]" name="matchrule_match[1]"> <option value="" disabled="" selected="">Hoe te matchen?</option> <option value="">Moet wel matchen</option> <option value="">Moet niet matchen</option> </select> <label for="matchrule_match[1]">Match</label> </div> <div class="input-field col s2"> <select id="matchrule_type[1]" name="matchrule_type"> <option value="" disabled="" selected="">Match type</option> <option value="shipment">Opdracht</option> <option value="specific_product">Specifiek product</option> <option value="count_total_products">Totaal aantal producten</option> <option value="per_product">Per product eigenschappen</option> <option value="from_address">Ophaaladres</option> <option value="to_address">Afleveradres</option> <option value="addresses">Beide adressen</option> </select> <label for="matchrule_type[1]">Match</label> </div> <div class="input-field col s2"> <select id="matchrule_column[1]" name="matchrule_column[1]"> <option value="" disabled="" selected="">Operator</option> <option value="">Groter dan (&gt;)</option> <option value="">Kleiner dan (&lt;)</option> <option value="">Groter dan of gelijk aan (&gt;=)</option> <option value="">Kleiner dan of gelijk aan (&lt;=)</option> <option value="">Gelijk aan (=)</option> <option value="">Bevat</option> <option value="">Is niet leeg</option> <option value="">Zit in boek</option> </select> <label for="matchrule_column[1]">Matchen op operator</label> </div> <div class="input-field col s2"> <select disabled="" id="matchrule_match_column[1]" name="matchrule_match_column[1]"> <option value="none" disabled="" selected="">Welke kolom?</option> </select> <label for="matchrule_match_column[1]">Welke kolom?</label> </div> <div class="input-field col s2"> <input id="matchrule_match_value[1]" name="matchrule_match_value[1]" type="text"><label for="matchrule_match_value[1]">Waarde</label></div> <div class="input-field col s2"> <input id="matchrule_weight[1]" name="matchrule_weight[1]" type="text"><label for="matchrule_weight[1]">Gewicht</label></div> </div></div><br><br><div class="divider"></div><br><br></div>