Dynamically add / remove div in jquery

See more:

ASP.NET

jQuery

Hi All

Here am facing problem with div , i want to add dynamically add and remove div with in div i have some control in asp.net

below i mention my code

<div id="collapseOne" class="panel-collapse collapse in">
                <div class="sourceEdu" id="Divsource">
                <asp:HiddenField ID="HFeducationdetails" runat="server" Value="0" />
               <div class="panel panel-info">
               <div class="panel-heading">
                    <h1 class="panel-title">School <span id="spancount"></span></h1>
                    <span class="pull-right clickable" data-effect="slideUp" id="btnclose">
                    <input type="button" value="X" ></span>
                </div>
                    <div class="box-body">
                        <div class="col-md-6">
                        <label class="control-label">Name of School</label>
                        <asp:TextBox ID="txtEducation3_1" runat="server" class="form-control" placeholder="Name of School"></asp:TextBox><br />
                        </div>
                        <div class="col-md-6">
                        <label class="control-label">Choose</label>
                            <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" style="margin-left:10px; margin-right:1px">
                            <asp:ListItem Selected="True">High School</asp:ListItem>
                            <asp:ListItem>College</asp:ListItem>
                            <asp:ListItem>Bus or Trade School</asp:ListItem>
                            <asp:ListItem>Professional School</asp:ListItem>
                            </asp:RadioButtonList>
                        </div>
                        <div class="row">
                        <div class="col-md-12">
                        <div class="col-md-6">
                        <label class="control-label">Location of School</label>
                        <asp:TextBox ID="txtlocationofschl3_1" runat="server" class="form-control" placeholder="Address" TextMode="MultiLine"></asp:TextBox><br />
                        </div>
                        <div class="col-md-2">
                        <label class="control-label">City</label>
                        <asp:TextBox ID="txtcity3_1" runat="server" class="form-control" placeholder="City"></asp:TextBox>
                        </div>
                        <div class="col-md-2">
                        <label class="control-label">State</label>
                        <asp:TextBox ID="txtstate3_1" runat="server" class="form-control" placeholder="State"></asp:TextBox>
                        </div>
                         <div class="col-md-2">
                        <label class="control-label">ZipCode</label>
                        <asp:TextBox ID="TextBox28" runat="server" class="form-control" placeholder="ZipCode"></asp:TextBox>
                        </div>
                        </div>
                        </div>
                        <div class="col-md-3">
                        <label class="control-label">Level / Degree Received</label>
                        <asp:TextBox ID="txtlevdegree3_1" runat="server" class="form-control"></asp:TextBox>
                        </div>
                        <div class="col-md-3">
                        <label class="control-label">Major</label>
                        <asp:TextBox ID="txtmajor3_1" runat="server" class="form-control"></asp:TextBox>
                        </div>
                        <div class="col-md-2">
                        <label class="control-label">Contact Person</label>
                        <asp:TextBox ID="txtcontactperson3_1" runat="server" class="form-control"></asp:TextBox>
                        </div>
                        <div class="col-md-2">
                        <label class="control-label">From</label>
                        <asp:TextBox ID="txtfrom3_1" runat="server" class="form-control" placeholder="From"></asp:TextBox>
                        </div>
                        <div class="col-md-2">
                        <label class="control-label">TO</label>
                        <asp:TextBox ID="txtTo3_1" runat="server" class="form-control" placeholder="To"></asp:TextBox>
                        </div>
                        <div class=" col-md-12">
                        <label class="control-label">Notes / Remarks</label>
                        <asp:TextBox ID="txtnotes3_1" runat="server" class="form-control" TextMode="MultiLine"></asp:TextBox>
                        </div>
                    </div>
                    <br>
                </div>
                </div>
                <div class="designationEdu">
                    
                </div>
                <div style="float:right;"><input id="Button1" type="button" value="+ADD" class="btn btn-primary" /></div>
                </div>

My JavaScript Code

<script type="text/javascript">
$(function() {
$('#Button1').click(function() {
            var hfAnswers = $("#<%= HFeducationdetails.ClientID %>");
            var answers = parseInt(hfAnswers.val()) + 1;
            hfAnswers.val(answers);
            $('.sourceEdu:first').clone().attr({ name: "ans_clone_" + answers, id: "ans_clone_" + answers }).appendTo('.designationEdu');
            })
        })
        function removeRow(input) {
            var hfAnswers = $("#<%= HFeducationdetails.ClientID %>");
            var answers = parseInt(hfAnswers.val()) + 1;
            hfAnswers.val(answers);
            $('#Divsource').attr({ name: "ans_clone_" + answers, id: "ans_clone_" + answers }).remove();
            //$('#Divsource').remove().attr({ name: "ans_clone_" + answers, id: "ans_clone_" + answers });
            //$('#Divsource').remove();
        }
    </script>

if i click three time of add button , it added three times but i can't remove ...

please guide me

What I have tried:

above mention code i tried ... if u have any doubt pls ask me ...