ReactJS multiple video autoplay on iOS

Question

I'm developing a website with iOS friendly.

I have some experiences of making video auto play on iOS. To make able to autoplay on iOS, we must follow these rules:

1. Video must be muted
2. If the video not mute, the user must interact with it before.

• On my website I have a list of videos. When user scroll to videos, it's autoplay with no sound (muted). When user tap of seek (interact) video it's able to play with sound.
• But the ios browser include Safari, Google Chrome look like remember the interaction only for the user interacted. It's not remeber for all other tag.

=> So. When user scroll website to new video on list, they have to interact with that tag to make it have sound. They must do it one-by-one video article.

=> To increase user experience, I create a global video tag in Javascript and RE-USE it to play all video article. I doesn't need create new tag for each video article. So after the first time video interact with video, other videos will able to play with sound.

function initGlobalVideo() { 
    video = $('<video class="main-video" playsinline="playsinline" controls="true" autoplay="" loop="" style="display: none;"/>');
    $("body").append(video);
}
// Play video
    // Play video with source corresponding video article
    video.src = data.videoLink;
   $(video).insertAfter(".video-anchor[data-dt='" + displayId + "']");

But above code is pure javascript website without using any javasript framework. Currently I'm writing new ReactJS project. It's not allow to render html element from Javascrpipt variable. It't must be a reactjs component. In reactjs how do I render a from a javascript variable. ?