You are appending extra DOM elements with Javascript after the DOM is ready. $(document).ready()
fires after the initial DOM is loaded. That means what is sent in the initial request. It doesn't know about your dynamic appends in an external Javascript.
Furthermore, scripts included in the <head>
section get loaded synchronously before the <body>
section gets loaded.