Display values from Javascript array in specific order depending on a key value pair

PFB the javascript code I have tried so far: https://jsfiddle.net/mL6o4fyx/

I want to display values from below Javascript array in 12 boxes as shown in attached image Boxes. The product name from the object which have key value pair as "name": "Box" should be displayed in Box1. Also other products which have same position should be displayed in Box1. Eg. in the below array "name": "Box" present in id 100 have position: 8. The product from id 102 also have position 8. So both box1 and product9 should be displayed in Box1.

Once we get the position for box one, other products with next position should be displayed in next box. Eg. product 1,2,3 and 4 should be displayed in box2 since they all have position 9.

The position can be between 0 and 11. So if the position reaches 11, it should again start with 0. If a product for any position is missing that box will remain blank.

"product_positions": [
      {
        "id": 0,
        "name": "Product1",
        "position": 9,
      },
      {
        "id": 1,
        "name": "Product2",
        "position": 9,
      },
      {
        "id": 2,
        "name": "Product3",
        "position": 9,
      },
      {
        "id": 3,
        "name": "Product4",
        "position": 9,
      },
      {
        "id": 4,
        "name": "Product5",
        "position": 10,
      },
      {
        "id": 5,
        "name": "Product6",
        "position": 7,
      },
      {
        "id": 6,
        "name": "Product7",
        "position": 6,
      },
      {
        "id": 100,
        "name": "Box",
        "position": 8,
      },
      {
        "id": 101,
        "name": "Product8",
        "position": 2,
      },
      {
        "id": 102,
        "name": "Product9",
        "position": 8,
      }
    ],

These are the boxes I have so far:

The final image should look like like this:

Solution

Finally I got the answer.

var firstBox = '';
var secondBox = '';
var thirdBox = '';
var fourth = '';
var fifthbox = '';
var sixthbox = '';
var seventhbox = '';
var eigthbox = '';
var ninthbox = '';
var tenthbox = '';
var eleventhbox = '';
var twelthbox = '';
var box1 = [];
var box2 = [];
var box3 = [];
var box4 = [];
var box5 = [];
var box6 = [];
var box7 = [];
var box8 = [];
var box9 = [];
var box10 = [];
var box11 = [];
var box12 = [];
var boxnumber = [];
            
var product_positions= [
  {
    "id": 0,
    "name": "Product1",
    "position": 9,
  },
  {
    "id": 1,
    "name": "Product2",
    "position": 9,
  },
  {
    "id": 2,
    "name": "Product3",
    "position": 9,
  },
  {
    "id": 3,
    "name": "Product4",
    "position": 9,
  },
  {
    "id": 4,
    "name": "Product5",
    "position": 10,
  },
  {
    "id": 5,
    "name": "Product6",
    "position": 7,
  },
  {
    "id": 6,
    "name": "Product7",
    "position": 6,
  },
  {
    "id": 100,
    "name": "Box",
    "position": 8,
  },
  {
    "id": 101,
    "name": "Product8",
    "position": 2,
  },
  {
    "id": 102,
    "name": "Product9",
    "position": 8,
  }
];

let position = '';
let positionObj = product_positions.find(prod => prod.name === 'Box');
position = positionObj.position;       
console.log("position at line 82", position);
    
for (let products in product_positions){
  if (product_positions[products].position === position){
    box1.push(product_positions[products]); 
    console.log("box1", box1);
  }
  if (product_positions[products].position === ((position+1)%12)){
    box2.push(product_positions[products]);
    console.log("box2", box2);
  }
  if (product_positions[products].position === ((position+2)%12)){
    box3.push(product_positions[products]);
    console.log("box3", box3);
  }
  if (product_positions[products].position === ((position+3)%12)){
    box4.push(product_positions[products]);
    console.log("box4", box4);
  }
  if (product_positions[products].position === ((position+4)%12)){
    box5.push(product_positions[products]);
    console.log("box5", box5);
  }
  if (product_positions[products].position === ((position+5)%12)){
    box6.push(product_positions[products]);
    console.log("box6", box6);
  }
  if (product_positions[products].position === ((position+6)%12)){
    box7.push(product_positions[products]);
    console.log("box7", box7);
  }
  if (product_positions[products].position === ((position+7)%12)){
    box8.push(product_positions[products]);
    console.log("box8", box8);
  }
  if (product_positions[products].position === ((position+8)%12)){
    box9.push(product_positions[products]);
    console.log("box9", box9);
  }
  if (product_positions[products].position === ((position+9)%12)){
    box11.push(product_positions[products]);
    console.log("box10", box10);
  }
  if (product_positions[products].position === ((position+10)%12)){
    box11.push(product_positions[products]);
    console.log("box11", box11);
  }
  if (product_positions[products].position === ((position+11)%12)){
    box12.push(product_positions[products]);
    console.log("box12", box12);
  }
}