Jquery ajax – Jquery – Append text to to Html

I have this ajax call that returns a short sentence which is for descriptive purposes for a user. Through the debugging console I can see that I am returning the correct data. My issue arises when I attempt to append this data to a html <p> tag. I have tried both .append and .text as I am using JQuery. I have had no luck so far, where am i going wrong?

HTML

<div>
  <p class="descriptionDisplay"> </p>
</div>

JQuery

    $('#scenarioDropdownList').change(function () {
        var scenarioId = $('#scenarioDropdownList option:selected').attr('id');
        getscenarioDescription(scenarioId);
        getData(scenarioId);
    });

    function getscenarioDescription(scenarioId) {
        $.ajax({
                    type: "GET",
                    url: 'https://localhost:44340/api/ScenarioDescriptors/GetScenarioDescriptions',
                    data: {scenarioId: scenarioId},
                    dataType: 'JSON',
                    success:function(data) {
                        $.each(data, function(key, val) {
                            console.log(val.scenarioDescription);
                            var descriptionText = val.scenarioDescription;

                            $('#descriptionDisplay').text(descriptionText); // This part isn't working correctly

                        })

                    }
                });  
    }

The output of console.log($('#descriptionDisplay').length) is 0.