JavaScript Add/Remove sequential divs (add/remove/insert/re-order steps)

I currently have javascript/jquery to 'add and remove' steps from a set of instructions dynamically created in divs.

    function add(){ 
        var id = document.getElementById("hiddenCount").value;  
        $("#myId").append("<div id='step"+ 'id' + "...onclick='delete('"+id+")"...);
        id = (id -1) + 2;
        documen开发者_如何学Got.getElementById("hiddenCount").value = id;
    }
    function delete(id){
        $("#" +id).remove();
        document.getElementById("hiddenCount").value = (id-1);
    }

This is great for adding and removing NON-sequenced/ordered ids, but if I want to insert a step in between 2 other steps or, remove several steps and then add, the numbering of ids becomes very unordered. Do you know of any javascript that handles situations like this, or should I use some other method to do this, like sortable values, or ordered lists?

The overall goal is to create a very easily editable way to add/remove/insert/re-order instructions dynamically with sequential div tags using jquery/javascript. In some cases the steps are pre-populated (from a database) and displayed, and will need to be edited. In some cases there are NO steps at all, but they need to create them.

I would suggest you use unordered lists, that way you can base the step's ordering not on their id's or something else, but on their index inside the parent ul. If you'd like a code example I wouldn't mind writing one up.