Double display of the image on the button when dynamically setting the image from javascript

Question

Double display of the image on the button when dynamically setting the image from javascript

I have a problem when button images are dynamically set.

I have an HTML div that will contain a set of buttons (these buttons will be created dynamically using javascript), each button will have an identifier. By default, this div is hidden and will only be displayed after clicking the "Display" button.

<body onload="getButtonSet()">
   <div id="btn-container"></div>
</body>

When you click the "Display Button" button, the system will retrieve the button image, calling a function that will query the database to receive the image, and then use jQuery to insert the image on each button in the button sets.

function setButtonIcon(resultSet) {
    var mimeType = resultSet[0].mimetype;
    var imgData = resultSet[0].documentbody;
    var buttonId = '#' + resultSet.Id;
    var imgSrc = "data:" + mimeType + ";base64," + imgData;
    var buttonControl = $('#btn-container').contents().find(buttonId);
    var imgControl = '<div class="div-img"> <img class="btn-icon" src="' + imgSrc + '"></div>'
    $(imgControl).prependTo(buttonControl);
};

Secondly, I have another button to clear the buttons in the button sets and hide the div.

$('#btn-container').setVisible(false);

, . div div ( $('#btn-container').empty()) , , , , div ( , ), 2 .

- , ?

, .

: CRM

    var getButtonSet = function () {
        var query = Xrm.Page.context.getClientUrl() +
            "/api/data/v8.0/entityname?$select=field_1,field_2&$orderby=order_field asc";
        getData(query, getButtonSetSuccessCallback, getDataFailCallback, true);
    };

function getData(queryUrl, successCallback, failCallback, async) {
    var req = new XMLHttpRequest();
    req.open(consts.method.get, queryUrl, async);
    req.setRequestHeader("Accept", "application/json");
    req.setRequestHeader("Content-Type",  "application/json;charset=utf-8");
    req.setRequestHeader("OData-MaxVersion", "4.0");
    req.setRequestHeader("OData-Version", "4.0");
    req.setRequestHeader("Prefer", "odata.include-annotations=\"OData.Community.Display.V1.FormattedValue\"");
    req.onreadystatechange = function () {
        if (this.readyState === 4) {
            req.onreadystatechange = null;
            if (this.status === 200) {
                var results = JSON.parse(this.response);
                // success callback
                successCallback(results);
            }
            else {
                var error = JSON.parse(this.response).error;
                // fail callback
                failCallback(error);
            }
        }
    };
    req.send();
}