Data selection and filtering Here i have javascript code where is 'animals' object and 'people' array of objects. User selects the data from select box and accordingly table fills with selected data(which is array of objects) and when user wants to reset everything to the state before selected data, user just clicks 'backtozero' button.
the code is a little complicated to understand for beginners specially two 'for loops'(i know foreach but maybe someting else ?) and also information which is inside of 'addEventListeners function' any suggestion for making whole thing easier to read for beginners ? feel free to make changes : 



let animals 
let animalCols = ['Animal', 'Animal 2'] 
let peopleCols = ['Person', 'Person 2'] 
 
function myFunction() { 
  paivitys(animals, animalCols) 
} 
 
function paivitys(dataa, arvvoja) { 
  console.log(dataa); 
  //---- 
  if (dataa.hasOwnProperty("animal")) { 
    document.getElementById("1name").innerHTML = dataa.animal; 
  } else { 
    document.getElementById("1name").innerHTML = dataa.person; 
  } 
  //----   
  if (dataa.hasOwnProperty("animal2")) { 
    document.getElementById("2name").innerHTML = dataa.animal2; 
  } else { 
    document.getElementById("2name").innerHTML = dataa.person2; 
     
  } 
 
  document.getElementById("1name1").innerHTML = arvvoja[0]; 
  document.getElementById("2name1").innerHTML = arvvoja[1]; 
 
  //-----  
  document.getElementById("id").innerHTML = dataa.id; 
} 
 
function paivitaselekt(araytassa, arvvoja) { 
 
var i, j;
for (i = 0; i &lt; araytassa.length; i++) { 
    var ssellecct = document.getElementById("Select"); 
    var oppttion = document.createElement("option"); 
    for (j = 0; j &lt; arvvoja.length; j++) { 
       oppttion.textContent += araytassa[i][arvvoja[j]] + " "; 
    } 
    ssellecct.appendChild(oppttion); 
}  
} 
 
animals = { 
  "animal": "tiger", 
  "animal2": "lion", 
  "id": "54321", 
  "dole": { 
    "Key": "fhd699f" 
  } 
} 
 
paivitys(animals, animalCols); 
let infoarray; 
 
people = [{ 
    "person": "kaka", 
    "person2": "julle", 
    "id": "9874", 
  }, 
  { 
    "person": "Ronaldo", 
    "person2": "jussi", 
    "id": "65555", 
  } 
] 
infoarray = people; 
paivitaselekt(infoarray, ["person", "id"]); 
 
document.getElementById("Select").addEventListener("change", function(event) { 
  const chosenid = event.target.value.split(" ")[1]; 
  const choseninfo = infoarray.filter((dataa) =&gt; dataa.id === chosenid)[0]; 
  paivitys(choseninfo, peopleCols); 
}); 
&lt;!DOCTYPE html&gt; 
&lt;html lang="en"&gt; 
  &lt;head&gt; 
    &lt;meta charset="UTF-8" /&gt; 
    &lt;meta name="viewport" content="width=device-width" /&gt; 
    &lt;link 
      rel="stylesheet" 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
    /&gt; 
    &lt;link 
      rel="stylesheet" 
      href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" 
      integrity="sha384UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" 
      crossorigin="anonymous" 
    /&gt; 
    &lt;style&gt; 
 
    &lt;/style&gt; 
  &lt;/head&gt; 
  &lt;body&gt; 
  
&lt;div class=""&gt; 
  &lt;table class="table "&gt; 
    &lt;thead&gt; 
      &lt;tr&gt; 
        &lt;th   id="1name1" class="table-success"&gt;Animal&lt;/th&gt; 
        &lt;th   id="2name1" class="table-success"&gt;Animal&lt;/th&gt; 
        &lt;th   class="table-success"&gt;id&lt;/th&gt; 
      &lt;/tr&gt; 
    &lt;/thead&gt; 
    &lt;tbody&gt; 
      &lt;th id="1name"&gt;&lt;/th&gt; 
      &lt;th id="2name"&gt;&lt;/th&gt; 
      &lt;th id="id"&gt;&lt;/th&gt; 
    &lt;/tbody&gt; 
  &lt;/table&gt; 
 
  &lt;select id="Select" &gt;&lt;/select&gt; 
  &lt;button onclick="myFunction()"&gt;backtozero&lt;/button&gt; 
&lt;/div&gt; 
 &lt;/body&gt; 
&lt;/html&gt;
Indent your code!
Naming convention


Only use English


paivitys -> update -> though really this should be with a subject, so updateObjekt?
dataa -> data
arvvoja -> values
paivitaselekt -> updateSelection

Dont mispel


ssellecct -> selectElement
oppttion -> option

Use lowerCamelCase


infoarray -> infoArray
chosenid -> chosenId
choseninfo -> chosenInfo

myFunction -> this is an unfortunate name, it does not say anything about its functionality
The names of your HTML elements id's can be improved

Dont mix var and const/let
Don't console.log() in production code
Comments should improve understanding, //------ does not do that, just use newlines/whitespace
Dont assign onclick events in html with onclick, use addEventLister()
It seems people is a global variable, don't create global variables
It seems you create people and infoarray, then assign people to infoarray, and then never use people again. It does not seem to make sense