Jquery: Create multiple entities

I am creating a stickies reminder application for an iphone website. The goal is to have the user to create as many "stickies" as he wants - all the data would be saved with localstorage.

I have a working prototype of the stickies here:

    $( function() {
        $('#sticky-edit').bind( 'taphold', function( e ) {
            alert( 'You tapped and held!' );
            var thetext = localStorage.getItem("sticky");
            $(".sticky-text").html('<input id="sticky-input" type="text" value="'+thetext+'" />');
      } ); 
      
        $('#sticky-submit').bind( 'taphold', function( e ) {
            var data = $("#sticky-input").val();
            alert('Notes Saved!');
            localStorage.setItem("sticky", data);
            $(".sticky-text").text(localStorage.getItem("sticky")).show();
      } );  

    } );

    $(".sticky-text").text(localStorage.getItem("sticky")).show();

#stickies li {
    position: relative;
    width: 200px;
    min-height: 100px;
    margin: 25px auto;
    padding: 15px;
    background: #f1f3a2;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(247,247,210,1)), to(rgba(240,242,155,1)));
    background: -moz-linear-gradient(top, rgba(247,247,210,1), rgba(240,242,155,1));
    -webkit-box-shadow: 0 2px 12px rgba(0,0,0,.5);
    -moz-box-shadow: 0 2px 12px (rgba(0,0,0.5));
    box-shadow: 0 1px 2px #00开发者_StackOverflow中文版0;
    -webkit-transform: rotate(-.5deg); 
    -moz-transform: rotate(-.5deg); 
    -o-transform: rotate(-.5deg);   
    text-align: center;
    color: #000;
    text-shadow: white 1px 1px 0px;
    list-style: none;
}

#stickies li:nth-child(even) {
    -webkit-transform: rotate(.5deg); 
    -moz-transform: rotate(.5deg); 
    -o-transform: rotate(.5deg);     
}

#stickies li::before {
    content: ' ';
    display: block;
    position: absolute; 
    left: 65px;
    top: -15px;
    width: 75px;
    height: 25px;
    z-index: 2;
    background-color: rgba(243,245,228,0.5);
    border: 2px solid rgba(255,255,255,0.5);
    -webkit-box-shadow: 0 0 5px #888;
    -moz-box-shadow: 0 0 5px #888;
    box-shadow: 2px 2px 2px #000;
    -webkit-transform: rotate(-3deg); 
    -moz-transform: rotate(-3deg); 
    -o-transform: rotate(-3deg); 
}

#stickies li:nth-child(even)::before {
    -webkit-transform: rotate(3deg); 
    -moz-transform: rotate(3deg); 
    -o-transform: rotate(3deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="stickies">
    <li>
        <p class="sticky-text">Hello</p>
        <a id="sticky-edit">Edit</a>
        <a id="sticky-submit">Submit</a>
    </li>
</ul>

Now all I need to do is figure out how to allow the user to create as many stickies as they want each with its own local storage area. Is this possible with jquery or would it be easier to use php to accomplish this?

I did this in Flash once. What do you mean by local storage area? You can let the user make as many as he wants like this: http://jsfiddle.net/NegYd/14/ using javascript/ jquery. Key being:

function appendSticky(){
     var e= document.getElementById("submittext").value;
     $("#stickies").append("<li>"+e+"</li>");
     $.post("store.php", { text: e} );//you'll have to submit user information
}

and the html:

<input id="submittext" type='text'/>
<input type='submit' value='add note' onClick="javascript:appendSticky();"/>

Inside your store.php you then store the stickies into a MySQL Database. $sql="INSERT.."

I suggest organizing the stickies with float:left; with a random margin-leftvalue rather than a list for the ultimate post-it feel. Or even better, make the post-its drag-and-dropable.