JSFiddle - React, Tailwind, and code Playground

HTML

<script>document.querySelectorAll = null;</script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>

<button id="populate">Populate</button>
<button id="search">Search</button>

<div id="fixture">
    <table id="tblAA" class="AA">
        <tr><th>#tblAA template:</th></tr>
        <tr class="template">
            <td>
                <select name="CMP"><option value="">select[name=CMP]</option></select>
            </td>
        </tr>
        <tr><th>#tblAA instances:</th></tr>
    </table>
    
    <table id="tblMF" class="MF">
        <tr><th>#tblMF template:</th></tr>
        <tr class="template">
            <td>
                <select name="CMP"><option value="">select[name=CMP]</option></select>
            </td>
        </tr>
        <tr><th>#tblMF instances:</th></tr>
    </table>
</div>

CSS

table {
    margin: 1em 0;
    border: 2px groove silver;
}

JavaScript

var selector = "#tblMF .copy1 [name=CMP]",
    copies = 0;

$("#populate").on( "click", function() {
    display_AADest( copies, "tblAA" );
    display_AADest( copies, "tblMF" );
    copies++;
});

$("#search").on( "click", function() {
    alert( "found: " + $(selector).length );
}).append( " for <code>" + selector + "</code>" );

function display_AADest (index, tableId) {
	var i = index + 1;

	$( $( "#" + tableId + ' .template' )
        .clone()
        .removeClass('template')
        .addClass( 'copy' + i )
        .wrap("<div>").parent().html()
    ).appendTo( '#' + tableId );

	$( "#" + tableId + ' .copy' + i + ' [name="CMP"]' )
        .prop( "disabled", false );
};