How can I add new UI Elements to a list on click?

Question

I need to create the following panel called "Categories" that each time the user clicks on the "+New Category" link,
A new Text Box rectangle is added on which the user can input the category. For each added category an ordered number is signified on the side.

Currently this is my code:

HTML:

<div class="row">
     <div class="col-lg-3">
           <section class="panel">
                <header class="panel-heading">
                   <h2 class="panel-title">Categories</h2>
                   <a class="new-category" href="#add-new-app-category">+ New Category</a>
                </header>
           </section>
     </div>
</div> <!-- END <div class="row"> -->

CSS:

.panel {
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
}

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
/*    border-radius: 4px;*/
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
/*    overflow-y: auto;*/
    width:431px;
}


.panel-heading {
    background: #fdfdfd;
/*    border-radius: 5px 5px 0 0;*/
/*    border-bottom: 1px solid #DADADA;*/
/*    padding: 18px;*/
    position: relative;
}

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 22px;
    color: #2baab1;
    font-family:'Lato', sans-serif;
    display:inline-block;
}

.panel-body {
    background: #fdfdfd;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
/*    border-radius: 5px;*/
}


.panel-body {
    padding: 15px;
}


.new-category {
    float:right;
    margin-top:5px;
    text-decoration:none;
}

.new-category:link , .new-category:visited, .new-category:hover{
    text-decoration:none;
}

The jsfiddle link: https://jsfiddle.net/kzc024vq/2/

Each time the user clicks on the "+New Category" link, new ordered textbox UI elements should be added, like shown in this image:

In addition what was also required from me:

1. I need to add the possibility to delete a category in the list by clicking on the "x" of that specific text box

2. That I can click and drag it over the other elements of the list.

Answer 1

You must use .append() to add new elements into html container, and .remove() to remove an specific element. You could use click event to use add and remove elements.

Example:

$( ".new-category" ).click(function() {
  $( '#container' ).append('<div>new category <a class="close-category" href="#">x</a></div>');
});

$( "#container" ).on( "click", ".close-category", function( event ) {
    $( this).parent().remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="row" id="container">
                    <div class="col-lg-3">
                        <section class="panel">
                            <header class="panel-heading">
                                <h2 class="panel-title">Categories</h2>
                                <a class="new-category" href="#add-new-app-category">+ New Category</a>
                            </header>
                        </section>
                    </div>
                </div> <!-- END <div class="row"> -->

You need use delegate event to update events when you append new category because The new objects don't inherit the event.

$( "#container" ).on( "click", ".close-category", function( event ) {
        $( this).parent().remove();
    });

Answer 2

function createCategory(){
  var htmlStr = '<h2 class="panel-title">Categories</h2>
               <a class="new-category"href="#add-new-app-category">+ New Category</a>'
  $('#yourWrapperDiv').append(htmlStr);

}

and HTML side:

<a id="newCategory" onclick="createCategory()">new category</a>

http://www.w3schools.com/jquery/html_append.asp

if you want to give the new categories own names, you either need to add an input field to type the name in, or you need to generate unique IDs.

if you dont want the click handler to be written html side you also can do:

$('#newCategoryLink').click(function(){
  createCategory();
});