title: Append text, when property value is equal to css class name
body: <p>I'm trying to practice the state render view, where the state will determine where in the DOM an object is placed.</p>
  
  <p>Basically, there are two HTML elements, both created in Javascript. Each will have classes <code>.one</code> and <code>.two</code>. There is also an array with two objects, with a slot property. The slot will determine which HTML element the names will be assigned to.</p>
  
  <p>I tried looping through the state first, then nest a loop of the <code>.name</code> class. However when rendered, the first object is displayed first, when its slot is two; so ideally Tom appears in the second div.</p>
  
  <p>I appreciate any input I could get. Thanks in advance!</p>
  
  <p>Javascript</p>
  
  <pre><code>const body = document.querySelector('body');
  
  const people = [
    {name: 'Tom', slot: 'two'},
    {name: 'Tim', slot: 'one'}
  ];
  
  const createDiv = (arg) =&gt; {
    const div = document.createElement('div');
  
    div.classList.add('name', arg.slot);
  
    body.append(div);
  
    const namesClass = document.querySelectorAll('.name');
  
    people.forEach((ind)=&gt;{
      namesClass.forEach((index)=&gt;{
        if(index.classList.contains(ind.slot)){
          index.innerText = ind.name;
        };
      });
    });
  
    return div;
  }
  
  const render = () =&gt; {
    people.forEach(function(index){
      createDiv(index);
    });
  }
  
  render();
  </code></pre>