I have this code for displaying content for login and registration in my PHP file:

<?php // LOGIN PART ?>
<div class="login-part"></div>

<?php // REGISTRATION PART ?>
<div class="registration-part"></div>

And this in my js file:

$(document).ready( function() {
            // FOR REGISTRATION
            $('span.logreg.reg').click(function () {

                $('div.registration-part').append('<p>Registration</p>');
            });

            // FOR LOGIN
            $('span.logreg.log').click(function () {

                // insert html
                $('div.login-part').append('<p>Login</p>');
            });
        });

Now, everytime I click on a span it shows the text login or registration, according to which of the span was clicked.

Thats OK, however I need to add it only once, so when the user click more times on the span it will be not adding more text.

Remove() or empty() is not an option, as far as I know, because I need the information inside input boxes (there will be input boxes later for inserting user info) to stay there and not be deleted if the user click accidentally on the span again.

It can however delete the html inside the div, if he clicks on another span. E.g. if span.log is active, after clicking on span.log nothing happens, but if he clicks on span.reg the html inside div.login-part will be removed and registration text will appear.

How to do something like this?