How to improve the program using oop?

Question

OOP

I want to say in advance that I am a beginner and just starting to learn js. It is necessary to make it so that a table is built from the available data. Here they are:

let data = [
    {
        "name": "tapochek 1",
        "size": "35",
        "isThere": "12",
        "price": "1234"
    },
    {
        "name": "tapochek 2",
        "size": "37",
        "isThere": "0",
        "price": "4326"
    },
    {
        "name": "tapochek 3",
        "size": "15",
        "isThere": "28",
        "price": "1124,80"
    },
    {
        "name": "tapochek 4",
        "size": "40",
        "isThere": "93",
        "price": "1443"
    }
];

I need to do this with oop, but I can't seem to get it right. I just can't bind classes, objects and methods to this assignment. I wrote code that doesn't use oop at all:

let tr1 = document.querySelector(".tr1");
let tr2 = document.querySelector(".tr2");
let tr3 = document.querySelector(".tr3");
let tr4 = document.querySelector(".tr4");
let tr5 = document.querySelector(".tr5");

for (let i = 0; i < data.length; i++) {
    let firstTd = document.createElement("td");
    firstTd.textContent = data[i].name;
    tr1.appendChild(firstTd);

    let secondTd = document.createElement("td");
    secondTd.textContent = data[i].size;
    tr2.appendChild(secondTd);

    let thirdTd = document.createElement("td");
    thirdTd.textContent = data[i].isThere;

    let fourthTd = document.createElement("td");
    fourthTd.textContent = data[i].price;
    tr4.appendChild(fourthTd);

    let fifthTd = document.createElement("td");
    let fifthTdButton = document.createElement("button");
    fifthTdButton.className = "plusButton";
    
    if (data[i].isThere == "0") {
        fifthTd.textContent = "Невозможно";
        thirdTd.textContent = "Нет в наличии";
        tr5.appendChild(fifthTd);
        tr3.appendChild(thirdTd);
    } else {
        fifthTdButton.textContent = "+";
        fifthTd.appendChild(fifthTdButton);
        tr5.appendChild(fifthTd);
        tr3.appendChild(thirdTd);
    }
}

<table border="1">
        <tr class="tr1">
            <td>Имя</td>
        </tr>
        <tr class="tr2">
            <td>Размер</td>
        </tr>
        <tr class="tr3">
            <td>Наличие</td>
        </tr>
        <tr class="tr4">
            <td>Цена</td>
        </tr>
        <tr class="tr5">
            <td>Добавить в корзину</td>
        </tr>
    </table>

So. I want to ask you very much about two things:
1. There are a lot of repetitive parts in my code and I don't know how to optimize them.
2. I don't know how to do this task using OOP (and at the same time I know the theory, but I can't put it into practice).

Tell me please.

Answer 1

Just rendering the data is enough

Answer 2

Do not think that OOP is a holy grail, and as soon as you start writing everything through classes, you will have less code and it will be optimal. The only purpose of OOP is to significantly facilitate the development and subsequent maintenance of complex software (large projects).
meaningless OOP "type" code

const datas = [
{
  description: "new",
  img: "https://www.svgimages.com/svg-image/s8/air-jordan-logo-256x256.png",
  name: "Nike1",
  price: 100
}, {
  description: "classic",
  img: "https://www.freepnglogos.com/uploads/puma-logo-png-1.png",
  name: "Adidas1",
  price: 120
},
{
  description: "new",
  img: "https://www.svgimages.com/svg-image/s8/air-jordan-logo-256x256.png",
  name: "Nike2",
  price: 200
}, {
  description: "classic",
  img: "https://www.freepnglogos.com/uploads/puma-logo-png-1.png",
  name: "Adidas2",
  price: 320
}
]

class Products {
  constructor(name, price, description, img){
    this.name = name;
    this.price = price;
    this.description = description;
    this.img = img;
 }    
}

class Manager {
 constructor(selector = '#tables', data = []) {
   this.root = document.querySelector(selector) || document.body;
   this.products = data.length === 0 ? this._demoProducts() : data;
 }
 _demoProducts() {
        let nike = new Products("Nike", 100, "new-shoes","https://www.svgimages.com/svg-image/s8/air-jordan-logo-256x256.png");
        let adidas = new Products("Adidas", 120, "classic-shoes","https://www.freepnglogos.com/uploads/puma-logo-png-1.png");
        return [nike, adidas];
    }
 getHTMLTemplate() {
   return this.products.map(function(product, i) {
     return `<div class="info-goods" data-id='${i}'>
            <div class="img"><img src=${product.img} width="80" height="80" alt='${product.name}'></div>
            <div class="name">${product.name}</div>
            <div class="price">${product.price}</div>
            <div class="description">${product.description}</div>
           </div>`
   });
 } 
 init(){
  this.root.insertAdjacentHTML('beforeend', this.getHTMLTemplate().join('<hr>'));
 }
}

const manager = new Manager();
      manager.init();