Why should I set different id (id='vr-article') for article section in article.html with article section in index.html

Id's are unique to a page and can only be used once. Therefore you can not have more than one element with the same id name.

In the teachers example, he used the Id "articles" on his articles section element, not article without an "s" like how you described you used in your question.

<a href="#articles">Articles</a>

<section id="articles">
    The content of the section..
</section>

With this id, the teacher replaced the href value in his nav's article anchor element with "#articles". With a href value like this, once clicked on, the browser is instructed to find the element on the page that has this id of "articles" and take the user to it.

The second example the teacher gave, is that he has shown you how you can link to a specific section of another page using the id attribute with his read more anchor elements.

He replaced the value of those two read more anchor elements to the path of his article.html followed by the hash sign and the Id name of vr-article. Which he defined that id name "vr-article" within his article.html page.

Index.html

<a href="pathtoarticle.html#vr-article">Read more</a>

If you use my example above, remember to replace the pathtoarticle.html With your location of your article.html file.

Article.html

<article id="vr-article">
    The content of the article...
</article>

With this second example, the browser is instructed to take the user to the new page and take them directly to the top of the element that has the Id attribute value of "vr-article"

Remember, ids can only be used once per page.

Hope this helps clear things up.

Yes it is fine, like I said, you can only have one id with the same name per page.