I am rendering dynamic data from array of objects on an html page. i want to flip the specific box. On front page i want to show image and heading while on the back page i want to show the paragraph. I am attaching the HTML and JavaScript file.

The HTML code

<div class="row rwOneOurservices ourServicesContainer" ></div> 

JavaScript where I am rendering my data from an array of objects

const FnRenderOurService = () => {
  if (ElourServicesContainer) {
    ElourServicesContainer.innerHTML = "";
    for (singleOurService of ourServices) {
      ElourServicesContainer.innerHTML += `
        <div class="col-sm-3 col-10 ourServiceElement" onclick="FnShowService('${singleOurService.id}')" id="${singleOurService.id}">
        <div class="row">
          <div class="col-md-4 col-12">
            <img
              src="${singleOurService.serviceImg}"
              alt=""
            />
          </div>
          <div class="col-md-8 col-12">
            <h5>${singleOurService.serviceName}</h5>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <p>
            ${singleOurService.serviceShortDesc}
            </p>
          </div>
        </div>
      </div>
          `;
    }
  }
};

How to apply flip on every grid separately (might be on the basis of 'Id')?