Dynamic labels in ASP.NET / javascript -

the website working on needs have dynamic labels, example: if webpage listing authors of particular book (with more 1 author) this: author 1: nikola tesla [remove] author 2: elon musk [remove] author 3: alan turing [remove]

(note [remove]in case button removes particular person author.)

my problem this, let's removed elon musk author label turing should change reflect (would become author 2).

i've tried couple different things using client side javascript (as solution needs work without refreshing page or postbacks) couldn't close working solution myself, logic seems off or limited lack of experiance in web dev.. haven't done web dev @ i'm learning i'm going. solution need work in case of user adding new author book.

edit: authors not stored in table rather listed using labels. (due things out of control) cannot changed.

edit 2: here code believe relevant let me know if else needed.
<div id='dvauthor" + i.tostring + "' class='form-group'><div class='col-sm-4 control-label'>

an added twist that on server side , replaces placeholder when author added (this means when author added page refresh -- fine, removing should not require same). more fun we're not using jquery!

the i.tostring integer added author's id numbered, ex dvauthor0 , on.

edit 3: reply @basic

okay clears things bit. div author's label coming server (i.e. each time author added page refreshes , client has newly added author presented them.) guess question is, how loop through div's on client, or better loop through each author's div , grab ids if don't know how many authors on page? while(hasnextauthor) {add author id array} sorry questions, i'm new web dev stuff, trying best.

also, don't need worry removing authors webpage, have function (both in client side , on server). numbering thing needs done , cosmetic, current numbering system works okay not dynamically change numbering user removes authors, rather waits until user selects save , reloads page correct numbering.

edit 4: think have way can done, have 1 hang up... how can number of authors on webpage client side? way in javascript can loop through , see how many divs created webpage?

original jquery solution

you can use array odd numbered indexes , bind it. way can account missing indexes.

there older stackoverflow article here answers question.

it amounts specifying index of each element along input value:

<input type="hidden" name="author.index" value="3" /> 

if purely looking make text pretty can do:

<div id="author_1" class="author-container">author <span class="authors" data-index="1">1</span>: first last <a ..>[remove]</a></div> 

then in javascript can (assuming jquery):

function updateindexes() {    var idx = 1;    $(".authors").each(function(el){       $(this).text(idx);       idx++;    }); }  $(function(){     $(".whateverremoveselector").on("click", function(){       $(this).parents(".author-container").remove();       updateindexes();    }); }) 

just javascript solution

i tried keep variable names vanilla enough make easy follow. both creation author's array, wiring remove event, renumbering author's.

hopefully solves need do!

var authors = [    { name: "j.k. rowling" },    { name: "orson scott card" },    { name: "stephen king" },    { name: "nicholas sparks" }  ];    /*  <div id='dvauthor" + i.tostring + "' class='form-group'><div class='col-sm-4 control-label'>  */    function remove(){    var e = event.target.parentnode.parentnode;      e.parentnode.removechild(e);        var numbers = document.getelementsbyclassname("sel-author-number");    for(var = 0; < numbers.length; i++){      var number = numbers[i];      number.innerhtml = i+1;    }  }    window.onload = function(){    var authors = [      { name: "j.k. rowling" },      { name: "orson scott card" },      { name: "stephen king" },      { name: "nicholas sparks" }    ];        var e = document.getelementbyid("authorscontainer");    for(var = 0; < authors.length; i++){      var container = document.createelement("div");      var author = document.createelement("div");      var authornumber = document.createelement("span");      authornumber.setattribute("class", "sel-author-number");      authornumber.appendchild(document.createtextnode((i+1)));      container.setattribute("class", "form-group");      var authorid = "author" + (i+1);      container.setattribute("id", authorid);       author.setattribute("class","col-sm-4 control-label");      author.appendchild(authornumber);      author.appendchild(document.createtextnode(": " + authors[i].name));      var removelink = document.createelement("span");      removelink.appendchild(document.createtextnode("[remove]"));      author.appendchild(removelink);      container.appendchild(author);            e.appendchild(container);      removelink.onclick = function(){        remove();      };    }  };

<div id="authorscontainer"></div>