Selector doesn't work after appending inside .on() click event

The class selector dynamically generated with my jquery function doesn't work.

Here is my jQuery:

$(".add-category").on("click",function () {
        // var id = $('#row-panel #col-panel').length.toString();
        var id2 = ($('#parent-row #child-row').length + 1).toString();

        $('#parent-row').append('<div class="row p-10" id="child-row">\
                                    <div class="col-lg-12">\
                                      <div class="panel panel-default panel-grey">\
                                        <div class="panel-body">\
                                          <div class="row p-10">\
                                            <div class="col-lg-4" >\
                                             <label>Category Name</label>\
                                            </div>\
                                            <div class="col-lg-8">\
                                              <input type="text" class="form-control" id="website-url">\
                                            </div>\
                                          </div>\
                                          <div class="row p-10">\
                                            <div class="col-lg-4" >\
                                             <label>Category URL</label>\
                                            </div>\
                                            <div class="col-lg-8">\
                                              <input type="text" class="form-control" id="website-url">\
                                            </div>\
                                          </div>\
                                        </div>\
                                      </div>\
                                    </div>\
                                  </div>\
                        ');
                    });

    $(".remove-category").on("click",function () {
        if ($('#parent-row #child-row').length == 1) {
            alert("You cannot remove the last form!");
            return false;
        }
        $("#parent-row #child-row:last-child").remove();
    });

this is the mark

<div class="panel-body" id="parent-row">
                                  <div class="row p-10">
                                    <div class="col-lg-4">
                                      <label>1 Category</label>
                                    </div>
                                    <div class="col-lg-8">
                                      <input type="text" class="form-control">
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="col-lg-offset-6 col-lg-4">
                                      <label>Add Sub Panel</label>
                                    </div>
                                    <div class="col-lg-2">
                                      <a href="#" id="add-category" class="add-category">
                                        <i class="fa fa-plus"></i>
                                      </a>&nbsp;&nbsp;&nbsp;
                                      <a href="#" id="remove-category" class="remove-category">
                                        <i class="fa fa-times"></i>
                                      </a>
                                    </div>
                                  </div>
                                  <div class="row p-10" id="child-row">
                                    <div class="col-lg-12">
                                      <div class="panel panel-default panel-grey">
                                        <div class="panel-body">
                                          <div class="row p-10">
                                            <div class="col-lg-4" >
                                             <label>Category Name</label>
                                            </div>
                                            <div class="col-lg-8">
                                              <input type="text" class="form-control" id="website-url">
                                            </div>
                                          </div>
                                          <div class="row p-10">
                                            <div class="col-lg-4" >
                                             <label>Category URL</label>
                                            </div>
                                            <div class="col-lg-8">
                                              <input type="text" class="form-control" id="website-url">
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>

The div with the id parent row is inside the dynamically generated dynamic div.

Here is the jsfiddle : http://jsfiddle.net/fn51hrgv/2/

EDIT: This is the latest code now and it works perfectly based on how I want it to behave. http://jsfiddle.net/fn51hrgv/4/