Paths are broken in reused elements on a HTML page if the root page is in another folder

Question

I am using this question to reuse a header on my pages. Here's how my files look like:

index.html

<header></header>
[other content]
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>

app/index.html

<header></header>
[other content]
<script src="../js/jquery.js"></script>
<script src="../js/main.js"></script>

header.html

<a href="index.html">Home</a>
<a href="app/index.html">App</a>

js/main.js

$(function(){
  $("header").load("../header.html");
});

index.html works fine, but app/index.html doesn't - in the header, the Home link opens app/index.html instead of index.html. This is because it copied header.html's contents and since the current folder is app, it breaks the navigation. How can I avoid this?