jQuery toggleClass example

Toggle class name on click in jQuery

by cackybirdlegs

HTML

<label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
 <label for="fname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
   <label for="fname">Email address: </label>
  <input type="text" id="emailaddr" name="emailaddr"><br><br>
<button id="append">Append</button>
</button>
<div class="flex-box">

</div>

JavaScript

$(document).ready(function () {
    $("#append").click(function () {
    var firstName = $('#fname').val();
    var lastName = $('#lname').val();
    var emailAddress = $('#emailaddr').val();
    $(".flex-box").append(
    '<div class="flexContact"><div class="flex-element" id="firstName"></div><div class="flex-element" id="lastname"></div><div class="flex-element" id="emailaddress"></div><div class="flex-element"></div><div class="flex-element"></div><div class="flex-element"></div><div class="flex-element"></div><div class="flex-element"></div><button id="hide">X</button></div>'
    );
    $('#firstName').text('First Name: ' + firstName);
    $('#lastname').text('Last Name: ' + lastName);
    $('#emailaddress').text('Email Address: ' + emailAddress);

        $(".flexContact #hide").click(function ()
        {
            $(this).parents(".flexContact").hide("slow");
        });
    });
});