Jquery dialog text doesn't read html when generated from code behind

In our project we are calling dialog boxes two ways. For the ones with static text and buttons we generate the dialog in a script and get the text from hidden spans in front-end. When using html elements inside the text from the span (i.e <br />), it renders correctly.

But when we create the same setup in code behind, it doesn't interpret the html.

This code works:

    var okClicked = false;
    var control;
    
$(".confirmAction").unbind('click');
    $(".confirmAction").click(function (e) {
        var control = $(this);

        let title = $(this).find('.confirmTitle').text();
        let info = $(this).find('.confirmInfo').html();

        if (!title.trim()) {
            title = "Er du sikker?"
        }
        if (!info.trim()) {
            info = "Vennligst bekreft at du vil gjennomføre denne operasjonen."
        }

        if (!okClicked) {
            $("<div class='consioDialogContainer'><i class='fa fa-5x fa-exclamation-triangle consioDialogIcon'></i><h2>" + title + "</h2><p>" + info + "</p></div>").dialog({
                autoOpen: true,
                modal: true,
                dialogClass: 'consioConfirmDialog',
                width: 500,
                minHeight: 300,
                top: '50%',
                left: '50%',
                title: title,
                open: function (event, ui) {
                    $('.consioConfirmDialog').find('.consioButtonCancel').focus();
                },
                buttons: [
                    {
                        text: 'Fortsett',
                        'class': 'consioButtonOK',
                        click: function () {
                            try {
                                showInprogress();
                            }catch (e){
                            }
                            okClicked = true;
                            control.trigger('click');
                            $(this).dialog("close");
                        }
                    }, {
                        text: 'Avbryt',
                        'class': 'consioButtonCancel',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ],
                Close: function () {
                    $(this).dialog("close");
                }
            });
            return false;
        }
        console.info('We may post back now!!!');
        okClicked = false;
        return true;
    });

This one does not:

    Private Function BuildScript() As String
        Dim script As New StringBuilder()
        script.AppendLine("<script type=""text/javascript"">")
        script.AppendLine($"    var msgboxResult = ''")
        script.AppendLine($"    function {Me.ClientID}() {{")
        script.AppendLine($"        $('<div class=""consioDialogContainer""><i class=""fas fa-5x {MessageBoxIcon} consioDialogIcon""></i><h2>{MessageBoxTitle}</h2><p>{MessageBoxText.Replace("'", "\'")}</p></div>').dialog({{")
        script.AppendLine($"                modal: true,")
        script.AppendLine($"                title: '{MessageBoxTitle}',")
        script.AppendLine($"                zindex: 10000,")
        script.AppendLine($"                autoOpen: true,")
        script.AppendLine($"                width: '500',")
        script.AppendLine($"                minHeight: 300,")
        script.AppendLine($"                top: '50%',")
        script.AppendLine($"                left: '50%',")
        script.AppendLine($"                dialogClass: '{If(MessageBoxType <> MessageBoxTypeClass.None, MessageBoxType.ToString(), "consioInfoDialog")}',")
        script.AppendLine($"                resizable: false,")
        script.AppendLine($"                open: function (event, ui) {{ $('.{If(MessageBoxType <> MessageBoxTypeClass.None, MessageBoxType.ToString(), "consioInfoDialog")}').find('.{FocusButtonClass()}').focus();}},")
        script.AppendLine($"                buttons: [")
        Select Case MsgBoxButton
            Case VbMsgBoxButton.vbOKOnly
                script.AppendLine(OKButton())
                Exit Select
            Case VbMsgBoxButton.vbOKCancel
                script.AppendLine($"{OKButton()},")
                script.AppendLine(CancelButton())
                Exit Select
            Case VbMsgBoxButton.vbAbortRetryIgnore
                script.AppendLine($"{AbortButton()},")
                script.AppendLine($"{RetryButton()},")
                script.AppendLine(IgnoreButton())
                Exit Select
            Case VbMsgBoxButton.vbRetryCancel
                script.AppendLine($"{RetryButton()},")
                script.AppendLine(CancelButton())
                Exit Select
            Case VbMsgBoxButton.vbYesNo
                script.AppendLine($"{YesButton()},")
                script.AppendLine(NoButton())
                Exit Select
            Case VbMsgBoxButton.vbYesNoCancel
                script.AppendLine($"{YesButton()},")
                script.AppendLine($"{NoButton()},")
                script.AppendLine(CancelButton())
                Exit Select
        End Select
        script.AppendLine($"            ],")
        script.AppendLine($"                close: function(event, ui) {{ $(this).remove();{ExitScript}; }}".Replace(";;", ";"))
        script.AppendLine($"            }});")
        script.AppendLine($"}}")
        'Str = (((((Str() & "       Dim msgboxResult" & ChrW(10) & ChrW(9) & ChrW(9) & "msgboxResult = msgbox(""") & Me.MessageBoxText & """") & Me.BuildMsgboxAttributeConstants) & Me.BuildMsgboxTitle & ")") & ChrW(10) & Me.BuildReturnScript)
        If Me.ShowOnWindowOnload Then
            script.AppendLine($"    jQuery(function($){{")
            script.AppendLine($"        {Me.ClientID}();")
            ' the two lines below removes disabled classes for buttons that, for some reason, looks disabled by default.
            script.AppendLine($"        $('.ui-state-disabled').removeClass('ui-state-disabled');")
            script.AppendLine($"        $('.ui-button-disabled').removeClass('ui-button-disabled');")
            script.AppendLine($"    }});")
        End If
        Return script.AppendLine("</script>").ToString()
    End Function

    Protected Overrides Sub Render(output As HtmlTextWriter)
        If Me.Enabled Then
#Disable Warning BC40000 ' Type or member is obsolete
            Parent.Page.ClientScript.RegisterStartupScript(Page.GetType(), ID, BuildScript())
#Enable Warning BC40000 ' Type or member is obsolete
            output.Write(BuildScript())
        End If
    End Sub

I have tried a few things with MessageBoxTitle, but none of it matters. I have tried only returning the value without any replaces and I have tried encoding it.

Public Property MessageBoxText As String
        Get
            Return _messageBoxText
        End Get
        Set(value As String)
            '_messageBoxText = WebUtility.HtmlEncode(value)
            _messageBoxText = value?.Replace("<", "&lt;")?.Replace(">", "&gt;")?.Replace(ChrW(13) & ChrW(10), "<br />")?.Replace(ChrW(10), "<br />")?.Replace(ChrW(13), "<br />")
        End Set
    End Property

Basically, everything works as it should when generating the script from behind, except that it doesn't interpret the html tags. So when I add this text:

MsgBox("<i>Endringer ikke lagret!<i/> <br>Dere bruker Visma eller et annet system som har begrensinger på antall tegn noen felter kan ha. <br />Følgende felter er for lange: " & res)

It doesn't render the italics and line breaks, but shows it as <i>Endringer ikke lagret!<i/> <br>Dere bruker Visma eller et annet system som har begrensinger på antall tegn noen felter kan ha. <br />Følgende felter er for lange:. When I add the same text to the span "confirmInfo" in front-end it renders correctly.

Any suggestions or ideas would be appreciated as I couldn't find anything about this particular case when searching online.