createtextbox.cfm

<style>

    .hideMe{

        display:none;

    }

    .btn-small {

      padding: 2px 10px;

      font-size: 11.9px;

      -webkit-border-radius: 3px;

         -moz-border-radius: 3px;

              border-radius: 3px;

    }

   

   

    .btn-success {

      color: #ffffff;

      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

      background-color: #5bb75b;

      *background-color: #51a351;

      background-image: -moz-linear-gradient(top, #62c462, #51a351);

      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));

      background-image: -webkit-linear-gradient(top, #62c462, #51a351);

      background-image: -o-linear-gradient(top, #62c462, #51a351);

      background-image: linear-gradient(to bottom, #62c462, #51a351);

      background-repeat: repeat-x;

      border-color: #51a351 #51a351 #387038;

      border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);

      filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);

    }

    .btn-danger {

      color: #ffffff;

      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

      background-color: #da4f49;

      *background-color: #bd362f;

      background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);

      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));

      background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);

      background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);

      background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);

      background-repeat: repeat-x;

      border-color: #bd362f #bd362f #802420;

      border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);

      filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);

    }

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<cfform name="addField">

<div align="left"  style="margin-bottom:10px;" id="emailTr">

    Email<br>

    <cfloop from="1" to="3" index="i">

        <Cfoutput>

        <div id="blockEMAIL#i#" <Cfif i neq 1> class="hideMe EMAILBlock"<cfelse>class="EMAILBlock"</cfif>>

            <cfinput type="text" name="UPI_email#i#" id="UPI_email#i#" required="#i eq 1#" validate="email" message="You must enter a valid email"

                placeholder="Enter your email address" style="width:220px;"  />                        

            <button name="removeEMAIL#i#" id="removeEMAIL#i#" style="margin-top:-10px"

                    <Cfif i eq 1> class="removeEMAIL hideMe btn-danger btn-small"<cfelse>class="btn btn-danger btn-small removeEMAIL" </cfif>>

             Remove</button>

        </div>

        <div style="margin-top:7px;clear:both;"></div>

        </cfoutput>

    </cfloop>

    <button class="btn-small btn-success" name="addEMAIL" id="addEMAIL">Add More</button>                    

</div>

</cfform>   

<Script>

    $('#addEMAIL').click(function(e) {

        var divToDisplay = 4 - $('#emailTr div.hideMe').length;                                  

        if(divToDisplay > 0 && divToDisplay < 4 )

        {

            $('#blockEMAIL'+divToDisplay).fadeIn('slow');

            $('#blockEMAIL'+divToDisplay).removeClass('hideMe');

            if(divToDisplay == 3)

                $('#addEMAIL').hide();

        }                                   

        return false;

    });

    $('.removeEMAIL').click(function(e){

        var divPart = $(this).attr('id').slice(-1);

        $('#blockEMAIL'+divPart+' input').val('');

        $('#blockEMAIL'+divPart).fadeOut('fast');

        $('#blockEMAIL'+divPart).addClass('hideMe');

        $('#addEMAIL').show();

        return false;

    });

</script>