How to display a hidden block only once using JQuery

[vngx]

Hi there
What I am trying is to show a hidden element only once but after that it should be display once .
Initially that div visibility is off that will be open only once.But the problem is after one click I am not able to show it again
this is my Jsfiddle

Edit fiddle - JSFiddle - Code Playground

[PaulOB]

Your count variable is initialized in the click event so it will always be 1:)

Move it outside the click event for it to work but you would probably be better doing it by visibility instead and not needing a global variable.

I would also just append it inside the same div all the time.

e.g.

<input type="button" id="mobile_Add" value="AddAnother">
</br>
<div id="mobile_block">
        <div class="clone">
                <input type="text" style="margin-left: 135px;" name="user_mobile_other" id="mobile_text"/>
                <input type="button" value="Delete" id="mob_del">
        </div>
</div>

<script>
        $("#mobile_Add").click(function(){
        if(!$('#mobile_block').is(':visible')){
            $("#mobile_block").css('display','block');
        }
        else{
        var c=$("#mobile_block .clone:first-child").clone();
        $("#mobile_block").append(c);
        }
    });
</script>

Note that ids are unique so you will need to change those ids in your cloned inputs.

[vngx]

@PaulOB
The code you have suggested is right but when I click on delete than it also need to delete in that case it will remove completely
here is my updated JSfiddle you can check can you make both Add and delete working and At start button is disable

Edit fiddle - JSFiddle - Code Playground

[megazoid]

I think you should not modify your original block
The better approach is to add “template” class to it and just hide forever

like this: http://jsfiddle.net/mbznkxu1/1/

Also, your elements have non-unique IDs what is bad practice (use classes instead)

[vngx]

@megazoid Thanks its working know finally