I recently read the discussion https://stackoverflow.com/questions/62617/whats-the-best-way-to-separate-php-code-and-html
I am facing a similar dilemma.
Currently working on a WordPress website which has a LOT of sliders, animated dropdowns, forms and other components. Each of component is used multiple times throughout the website, so I've created a PHP file for each of these components and I use include to insert them wherever they are required.
Now the file I am including contains HTML & JS {for initializing control}
And finally when I looked at the generated html page in browser, it was chaotic! HTML & JS mixed everywhere!
I wanted to know if its better to include everything in one big JS file and include it on top of every page or its more efficient to have small JS blocks in the section?