Initially, it seems like you are blending raw JavaScript with JQuery. Given the current trends, it is advisable to steer clear of JQuery as raw JS methods are equally straightforward, but notably faster. Moreover, they have been functioning well for the past 4 years across all browsers supported by their respective developers. To address this, I have replaced all JQuery components in your query with raw JS components in my response.
Simple Solution
Essentially, the correct approach to achieve your requirement is to execute it within your function. For instance:
function createContent(xPos, yPos) {
var divMark = document.createElement('div');
divMark.classList = 'markers mark';
divMark.style.top = yPos + 'px';
divMark.style.left = xPos + 'px';
var img = document.createElement('img');
img.classList = 'comment';
img.src = 'indeksiraj-1.png';
img.alt = 'myimage';
divMark.appendChild(img);
}
Subsequently, you will have to iterate over the arrays to invoke the function.
for (var i = 0; i < xList.length && i < yList.length; i++) {
createContent(xList[i], yList[i]);
}
Additional Consideration
As an alternative, you could utilize a single array for the xList and yList, enabling a more legible loop implementation.
var posList = [
{x: 265, y: 125},
{x: 152, y: 452},
{x: 364, y: 215},
];
posList.forEach(({x, y}) => {
createContent(x, y);
});
Preserving the Function Signature
After reviewing the additional context provided by your fiddle, it is apparent that the createContent function is triggered by a button click and encompasses more functionalities beyond what you shared. I have solely focused on removing the JQuery component from your snippet and inserted a placeholder for you to incorporate the remaining functionality in the createContent function.
function createContent(e) {
var divMark = document.createElement('div');
divMark.classList = 'markers mark';
var img = document.createElement('img');
img.classList = 'comment';
img.src = 'indeksiraj-1.png';
img.alt = 'myimage';
divMark.appendChild(img);
// ...insert the remaining code in the function here
return divMark;
}
for (var i = 0; i < xList.length && i < yList.length; i++) {
var mark = createContent();
mark.style.top = yList[i] + 'px';
mark.style.left = xList[i] + 'px';
}