Trying to add a select element

Question

I'm trying to add <select> inside a specific div that has a class that is shared by 3 divs. This is the code

<div id="producer_section_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_" class="section_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_ last_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_">
    <div class="field-row_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_">
        <fieldset>

            <span id="producer-name" class="input_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_"></span>
        </fieldset>
    </div>
    <div class="field-row_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_">
        <fieldset>
            <label for="producer-number">Producer Number</label>
            <span id="producer-number" class="input_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_">623886</span>
        </fieldset>
    </div>
    <div class="field-row_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_">
        <fieldset>
            <label for="producer-phone">Phone Number</label>
            <span id="producer-phone" class="input_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_">(888) 407-7044</span>
        </fieldset>
    </div>
    <div class="field-row_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_ last_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_">
        <fieldset>
            <label for="producer-email">Email Address</label>
            <span id="producer-email" class="input_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_">MEDICARE@EHEALTHINSURANCE.COM</span>
        </fieldset>
    </div>


</div>

Specifically the last row of producer email. Here is the code that im trying to use right now.

var addSelect = "<select>
Checkcheck</select>";

$('#producer_section_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_ .field-row_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_last_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_' ).append(addSelect);

Answer 1

If you look closely, that last element actually has two classes and not one. That is why your selector is not working.

Also, apparently, these classes are probably automatically generated so I wouldn't depend on them.

Maybe targeting the producer-email span then querying for it's parent would be a better approach.

Something like (untested):

$('#producer-email').parent().append(addSelect);

EDIT:

To target the parent div and not the fieldset, like you wanted, you can use closest('div') it, will traverse the DOM upwards and find and return the first div.

So the full code would be (untested):

$('#producer-email').closest('div').append(addSelect);