How to avoid excessive dependencies in the code of a complex web application?

Question

PHP

The essence of my problem: if you need to write something more complicated than sending a callback form from a landing page, then everything ends up with a monolith of code with such dependencies that, like in a joke: "Just don't touch anything."
It turns out shitty code, which is replete with a bunch of non-obvious connections between html, css, js and php based on id, classes, function parameters, etc. It seems to be normal, but, I think, not in such quantity ... How does it happen. At the beginning of work, I really want to make the most universal and flexible code. Writing. Everything seems to be fine. Then:
1) For example, I accept data from the form: I collect them by field classes using jquery. I do it this way: I pass this to the submit button handler, that is, I get access to the button element from the function. Then, through closest, I get the form itself and through find I look for the necessary fields. This is the only technology I came up with that does not have a hard binding to the id fields...
2) And here, for example, one more form is added. It looks similar, but slightly different. And it turns out either a new js-function (and then php) or the introduction of a certain modifier into an existing function. For example, a conditional id of the form and inside the resolution, depending on this modifier...
3) Further more. All this is transferred to php, grows larger and larger, and at the end of the project (and it is actually very small and should be done much better), the code looks so that you want to quietly select the files, press delete and start again, but HOW?
Briefly: in a month, I myself can’t immediately figure out my own code and easily modify it. And how to make everything easier and clearer, I do not know.
I ask you to suggest good literature or sites on designing web applications in terms of programming, client-server interaction and databases.

Answer 1

In fact, the essence of the problem: you don't know JS well. I'll explain now:
Well, what are we talking about here? But what about attribute selectors (name?), or in the end classes? But what about $.fn.serializeArray, which, if there is a form element, will itself receive all the fields and return an array containing them to us? Yes, and you need to listen to the submit event, which is dispatched on the form element itself, where you can already get the form through e.currentTarget (== this in jQuery) and simply call one method instead of a bunch of .find()
Take out the handler function separately and make it universal for both forms. (what does php have to do with it ???) This is provided that the second, as you said
No need to move frontend code to php.
Do the frontend build separately, php separately, there is no reason why they need to talk to each other, js works with the generated html. If you suddenly need a variable from the backend, there are a lot of ways to pass it in without moving the frontend code anywhere.
And answering the question from the title
Go for a component approach . Whether it's BEM, ES6 and/or CSS modules, there are many solutions. If you have a universal form component with its own dependencies, styles, and script, then there are much fewer problems in the code of a complex web application.

Answer 2

Everything written below is part of the author's personal experience and is not a panacea, lovers of chilling go to the forest:
1. Bring yourself to a single development standard. Myself personally, based on my experience, and not looking around at all sorts of Gulp, LESS and other crap that kind of helps in development (rarely actually).
2. Try to highlight patterns in your code and its processing, for example, the use of the same classes, layout structures. For example, for 99% of forms, I have a form class , with which I decorate 90% of css and do ajax through this class.
3. For PHP, just name the fields the same from project to project, it will help both for data validation and in general for writing a single handler that covers 80-90% of cases.
4. Read about KISS, DRY, SOLID, it helps a lot to put your brain in its place.