Both the form data and image data are submitted at the same time and have matching ids.
This is not necessarily true. There is absolutely nothing that ensures the two
ids will stay in sync. You have the right idea -using the
id to relate the two records- but one of them must not be auto-incrementing. One can be, but the other needs to be deliberately based on the first.
So when I try the joins above it’s a mess and the form data does not match with the image.
* in your queries. At best, it gets confusing; at worst, it can lead to SQL errors (e.g., if you join two tables that have columns with the same names). It is far better to explicitly name each column you want, for example:
SELECT f.username, f.name, f.species, f.population, f.weight, f.length, i.path FROM form_table f JOIN image_table i ON f.id = i.id
Also how do I add an image class around this code?
“Around” it? Are you trying to add a class to the image, or do you want to wrap the image in another element with a specific class?