JSFiddle - React, Tailwind, and code Playground

HTML

<input type="hidden" id="Favourite[Music].Song[Jazz].Name" value="Jazzy"/>
<input type="hidden" id="Favourite[Music].Song[Classical].Name" value="Classy"/>
<div id='console' />

JavaScript

// filter returns 2 elements as expected
$('#console').append("<div>" +
    $("[id^='Favourite[Music]']")
        .filter("[id^='Favourite[Music].Song']")
    .length + "</div>");

// filter should return 1 element but returns 0
$('#console').append("<div>" +
    $("[id^='Favourite[Music]']")
        .filter("[id^='Favourite[Music].Song[Jazz]']")
    .length + "</div>");

// straight selector returns 1 element as expected
$('#console').append("<div>" +
    $("[id^='Favourite[Music].Song[Jazz]']")
    .length + "</div>");