Cant figure out how to remove comma between array items without breaking rest of webpage

I am creating an array of images that will be tagged for sorting using buttons, I understand that the array is being converted into a string(?) and that is why the commas after each set of tags is showing up on the final item (The "}," at the end of each array item). I've included my code to turn that pulls the array into my "<div id="app"></div>" on the page. Is there an alternative here?

I understand this issue is stumping me because I have a fundamental lack of understanding of javascript, so I am not understanding the solutions I find online in a way that does not break everything I have setup so far, and I'm on a deadline here - and this code works with the rest of my code for this webpage that does a bunch of other stuff, and I lack the understanding to integrate this tag system in with the rest of the code when I use the solutions I've managed to find online.

const imgArr = [{
    src: "https://www.w3schools.com/how-spaces-works3.png",
    MultiFamily: 1,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 1,
    Sunshades: 1,
    GlassRailings: 1
  },
  {
    src: "https://www.w3schools.com/how-spaces-works3.png",
    MultiFamily: 0,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 1,
    Sunshades: 1,
    GlassRailings: 1
  },
  {
    src: "https://www.w3schools.com/how-spaces-works3.png",
    MultiFamily: 0,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 1,
    Sunshades: 1,
    GlassRailings: 1
  },
  {
    src: "https://www.w3schools.com/how-spaces-works3.png",
    MultiFamily: 1,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 0,
    Sunshades: 1,
    GlassRailings: 1
  }
];

/* Gemeric function to display array content on screen */
const init = (ar) => ar.map(el => {
  return `<div class="MasonryImagesDiv"><img class="MasonryImage" alt="FillerImage" src=${
    el.src
  }>
      <div>MultiFamily: ${el.MultiFamily}<br>
        AllGlass: ${el.AllGlass}
  </div>`;
});

const sortByAllGlass = (a, b) => {
  if (a.AllGlass === b.AllGlass) {
    return 0;
  }
  return a.AllGlass > b.AllGlass ? 1 : -1;
};
    /* MultiFamily Sorter low to high */
const sortByMultiFamily = (a, b) => {
  if (a.MultiFamily === b.MultiFamily) {
    return 0;
  }
  return a.MultiFamily > b.MultiFamily ? 1 : -1;
};
    
/* Generate array sorted by ascending numbers */
const function1 = () => {
  document.getElementById("app").innerHTML = init([...imgArr].sort(sortByAllGlass));
}
const function2 = () => {
  document.getElementById("app").innerHTML = init([...imgArr].sort(sortByMultiFamily));
}

document.getElementById("app").innerHTML = init(imgArr);