Help with CSS and JQuery: create read-only fields which display the input from a standard input field BUT aren't visible if empty

Hey guys!

I have been trying to find the relevant code which I will need to implement the following on my Webflow page:

I am trying to create read-only fields which display the input from a standard input field BUT aren’t visible if empty.

Due to my VERY limited code knowledge, I am pulling my hair out trying to find threads which give advice on this exact outcome.

I have a link with my progress in JSFiddle so far (just missing the hide if empty rule):

    http://jsfiddle.net/5ud8jkvf/9172/

I have the Jquery part cracked I believe but I want to apply this on 20+ fields instead of just the 2 example fields I have now. Can anyone recommend some JQuery which will give the desirable rule but for ALL readonly fields instead of a script for each individual field?

The main bit I need help with is the CSS/JQuery which I would have to use to hide or display:none if the readonly field is empty. I have left the display:none CSS in note form in my fiddle but this ONLY hides the field and doesn’t show it again once it has some content entered into the standard correlating input. Therefore, I presume I might have to use JQuery instead of CSS but I’m open to solutions…??

Please excuse my awful explination, I’m still very much learning how to ask these kinds of questions so they are understood correctly by you guys.

Cheers,
UXM

Use classes and class selectors instead of IDs (as IDs have to be unique). You might want to try http://stackoverflow.com

Thanks for your help Sam, I’ll do that now.