'use strict'

$(document).ready(function()
{

    $.ajax(
    {
        type: "GET",
        url: ".\test.xml",
        //async: false,
        dataType: "xml",
        success: function(xml)
        {
            let idDiv = 0;
            let idRadio = 0;

            $.parseXML(xml);
            $(xml).find('div').each(function()
            {
                const formDiv = document.createElement("div");
                formDiv.className = $(this).attr('name');
                setBorder(formDiv, $(this).find('border').attr('color'), $(this).find('border').attr('style'), $(this).find('border').attr('width'));
                formDiv.id = setID($(this),[idDiv]);
                console.log(formDiv.id);
                setCoordinates(formDiv, $(this).attr("top"), $(this).attr("left"), $(this).attr('width'), $(this).attr('height'));
                formDiv.style.position = "absolute";
                $(this).find('radio').each(function()
                {
                    $(this).find('elem').each(function()
                    {
                        const radioAndLabel = document.createElement("div");
                        const rad = document.createElement('input');
                        const lab = document.createElement("label");
                        rad.setAttribute("type", "radio");
                        rad.setAttribute("value", $(this).text());
                        rad.setAttribute("name", "lewis");
                        rad.id = setID($(this),[idDiv, idRadio]);
                        console.log(rad.id);
                        lab.setAttribute("for", $(this).text());
                        lab.innerHTML = $(this).text();
                        setCoordinates(radioAndLabel, $(this).attr('top'), $(this).attr('left'));
                        radioAndLabel.appendChild(rad);
                        radioAndLabel.appendChild(lab);
                        formDiv.appendChild(radioAndLabel);
                        idRadio++;
                    });
                });
                formDiv.appendChild(document.createElement("br"));
                document.body.appendChild(formDiv);
                idDiv++;
                idRadio = 0;

            });
        }
    });
});

function setCoordinates(elem, top, left, width, height)
{
    elem.style.position = "relative";
    if (top !== undefined)
    {
        elem.style.top = top;
    }
    if (left !== undefined)
    {
        elem.style.left = left;
    }
    if (width !== undefined)
    {
         elem.style.width = width;
    }
    if (height !== undefined)
    {
         elem.style.height = height;
    }
}

function setID(elem, values)
{
    let IDstring = elem.attr("id");
    for (let i=0; i<values.length; i++)
    {
        IDstring += values[i].toString() + "_";
    }
    IDstring = IDstring.substring(0, IDstring.length - 1);
    return IDstring
}

function setBorder(elem, color, style, width)
{
        elem.style.border = color + " " + style + " " + width;
}

<form>
    <div id="div_" name="div_" top="150px" left="150px" height="125px" width="310px">
        <border style="solid" width="3px" color="red"></border>
        <radio>
            <elem id="radio_">cercle</elem>
            <elem id="radio_" top="-20px" left="100px">carré</elem>
            <elem id="radio_" top="-20px">triangle</elem>
            <elem id="radio_" top="-40px" left="100px">rectangle</elem>
        </radio>
    </div>
    <div id="div_" name="div_" width="180px" height="45px">
    <border style="solid" width="3px" color="green"></border>
        <radio>
            <elem id="radio_">AAAA</elem>
            <elem id="radio_" top="-20px" left="100px">BBBB</elem>
            <elem id="radio_" top="-20px">CCCC</elem>
            <elem id="radio_" top="-40px" left="100px">DDDD</elem>
        </radio>
    </div>
</form>

<form>
    <div id="div_" name="div_" top="150px" left="150px" height="125px" width="310px">
        <border style="solid" width="3px" color="red"></border>
        <radio>
            <elem id="radio_">cercle</elem>
            <elem id="radio_" top="-20px" left="100px">carré</elem>
            <elem id="radio_" top="-20px">triangle</elem>
            <elem id="radio_" top="-40px" left="100px">rectangle</elem>
        </radio>
        <div id="div_" name="div_" width="180px" height="45px">
        <border style="solid" width="3px" color="green"></border>
            <radio>
                <elem id="radio_">AAAA</elem>
                <elem id="radio_" top="-20px" left="100px">BBBB</elem>
                <elem id="radio_" top="-20px">CCCC</elem>
                <elem id="radio_" top="-40px" left="100px">DDDD</elem>
            </radio>
        </div>
    </div>
</form>