jQuery Append on SVG text not displaying

Question

Okay here is the issue I am facing. I am pulling in an SVG file and loading the contents into the body. I have an AJAX call that pulls in an XML that correlates to this SVG.

I am able to change the colour fill of the symbol through jQuery, however, when I append a element into the symbol > g element it will not show in the browser, but it is there in chrome.

Code snippet jQuery

$(document).ready(function(){
$('body').load("../SVG_Tesing/svg.svg", function(){
    $.ajax({
    type: "GET",
    url: "../SVG_Tesing/xml.xml",
    dataType: "xml",
    success: function(xml)
        {
            $(xml).find('plots').find('plot').each(function()
            {
                var fnPlotID = $(this).attr('id');              
                var fnBookingID = $(this).find('plotBooking').attr('id');
                var fnPlotNumber = $(this).find('plotName').text(); 
                $("#site_x5F_"+fnPlotID+" path:eq(1)").after("<text transform='scale(1,-1)'>"+fnPlotNumber+"</text>");              
                //Colours Static
                var fnStaticOccupied = "#74A3C1";
                var fnStaticPending = "#E23813";
                var fnStaticOverdue = "#CD464F";

                //Colours Touring Pitches
                var fnTourOccupied = "#71934D";
                var fnTourPending = "#EB9C1E";
                var fnTourOverdue = "#D33A4B";

                if (fnBookingID != "")
                {                           

                    var fnSelector = "#site_x5F_"+fnPlotID;
                    $(fnSelector+" > g > path").attr("fill", fnTourOccupied);

                    var fnPlotPending = $(this).find('plotBooking').find('bookingPending');
                    var fnPlotOverdue = $(this).find('plotBooking').find('bookingOverdue');

                    if (fnPlotPending == "1")
                    {
                        $("#site_x5F_"+fnPlotID+" > g > path").attr("fill",fnTourPending);          
                    }
                    if (fnPlotOverdue == "1")
                    {
                        $("#site_x5F_"+fnPlotID+" > g > path").attr("fill",fnTourOverdue);
                    }
                }



            });
        },
        error: function() 
            {
                alert("An error occurred while processing XML file.");
            }
    });
});

});

This is the chrome inspector showing that the text has been appended.

Now here is the kicker. If I copy the whole SVG from the inspector and paste it into my SVG file and, save it and load up the test.html page then the numbers are displayed along with the ajax appended numbers that still do not show.

Would anyone know what could be causing this