Dynamically Added SELECT from JavaScript

Through Javascript I am adding SELECT, in a MODAL.

document.getElementById('addWebSocFieldBtn').addEventListener('click', () => {
      let fieldHtml = '';
      fieldHtml += `<div class="row mb-3">
                    <div class="col-12 col-sm-auto">
                    <label for="" class="form-label visually-hidden">Add Type of Link</label>
                    <select class="select" name="typflnk[]" data-mdb-container="#addWebSocLinksLabel">
                    <option value="1">Website</option>
                    <option value="2">Twitter</option>
                    <option value="3">Twitch</option>
                    <option value="4">LinkedIn</option>
                    <option value="5">GitHub</option>
                    </select>
                    </div>
                    <div class="col-12 col-sm-auto">
                    <label for="" class="form-label visually-hidden">Add Link</label>
                    <input type="text" class="form-control" id="" name="soclinks[]" placeholder="Add Link">
                    </div>
                    </div>`;
      document.getElementById('addWebSocLinksForm').insertAdjacentHTML('beforeend', fieldHtml);
      let mySelect = new mdb.Select(document.querySelector('#addWebSocLinksForm :not(:first-child(.row)) .select'));
    });

I already have one .row-block by default, that SELECT auto-initializes. But these JS-dynamically added blocks with SELECT don't.

When I click to add a new field, I get the error Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#addWebSocLinksForm :not(:first-child(.row)) .select' is not a valid selector.

Edit: It looks like the first SELECT, the one I have hard-coded gets cloned when I click the button.

<div class="col-12 col-sm-auto">
    <label for="" class="form-label visually-hidden">Add Type of Link</label>
    <div id="select-wrapper-537119" class="select-wrapper">
        <div class="form-outline">
            <input class="form-control select-input placeholder-active active" type="text" role="listbox" aria-multiselectable="false" aria-disabled="false" aria-haspopup="true" aria-expanded="false" readonly="true">
            <span class="select-arrow"></span>
            <div class="form-notch">
                <div class="form-notch-leading" style="width: 9px;"></div>
                <div class="form-notch-middle" style="width: 0px;"></div>
                <div class="form-notch-trailing"></div>
            </div>
            <div class="form-label select-fake-value">Website</div>
        </div>
        <div id="select-wrapper-461017" class="select-wrapper">
            <div class="form-outline">
                <input class="form-control select-input placeholder-active" type="text" role="listbox" aria-multiselectable="false" aria-disabled="false" aria-haspopup="true" aria-expanded="false" readonly="true">
                <span class="select-arrow"></span>
                <div class="form-notch">
                    <div class="form-notch-leading" style="width: 9px;"></div>
                    <div class="form-notch-middle" style="width: 0px;"></div>
                    <div class="form-notch-trailing"></div>
                </div>
                <div class="form-label select-fake-value">Website</div>
            </div>
            <select class="select select-initialized" name="typflnk[]" data-mdb-container="#addWebSocLinksLabel">
                <option value="1">Website</option>
                <option value="2">Twitter</option>
                <option value="3">Twitch</option>
                <option value="4">LinkedIn</option>
                <option value="5">GitHub</option>
            </select>
        </div>
    </div>
</div>