Can't append options in select tag

Can someone please tell what I am doing wrong ?

var $whatSummary = $("<p></p>");

var remindersContent2 = {
"Variant A": {
    "day": [
        -1,
        0
    ],
    "ids": [
        "D-1",
        "D0"
    ],
    "qm": {
        "a": b
    },
    "msg": {
        "a": b
    }
},
"Variant B": {
    "day": [
        1,
        2
    ],
    "ids": [
        "D1",
        "D2"
    ],
    "qm": {
        "x": y
    },
    "msg": {
        "x": y
    }
}

}

    $whatSummary.append("<select class='js-variantSelectContent'></select>")
    for (var key in remindersContent2) {
      var pkName =_dashUtils.getVariantName(remindersContent2[key]['day'])
      $('.js-variantSelectContent').append($("<option value ='" + key + "'>" + pkName + "</option>"))
    }`

By writing above code I want to add a variant selector which will display the data as per the variant pkName. Here $whatSummary is an empty container in which we are appending a selector as per our need.
Here pkName is getting populated properly with a string value like "-1st day to due date" for Variant A and "+1st day to +2nd day" for Variant B respectively. But the options are not getting appended with the pkNames, can someone help?

Before $whatSummary is appended to the DOM, the selector .js-variantSelectContent cannot find the select element inside it.

You can store the select element in a separate variable first.

const $select = $("<select class='js-variantSelectContent'/>");
$whatSummary.append($select);
for (const key in remindersContent2) {
	// ...
	$select.append($("<option value ='" + key + "'>" + pkName + "</option>"))
}
// add $whatSummary to the DOM after...