The only way you can do that is to loop over the repeater or flex field twice, once when outputting the header and then again when outputting the content.
I would probably stick with the inline CSS, it’s not really hurting anything and can be a good way to accomplish what you doing.
The only thing I would say is that I would not use uniqid() in the loop. This means that you are regenerating the IDs on every page load. I would likely create another meta_key to hold the ID so it remains consistent. This would also help you to put the CSS in the header if you want to do that.
