javascript - Subtract 1 from unique concatenated variables -

so i've wrote script gives user option add more 1 image form. if user chooses add more 1 image, click 'add image' button, , file field added.

when new file field added, id given field unique. first field statically set "1". if user clicks 'add image', second field given id of "2", "3" etc etc. has been working successfully.

note:

i'm not giving them option remove first file field @ all.

the issue:

due fact want check each file field has got file ready upload, i've decided add 'remove image' next each field when 'add image' button selected.

ideally, when user clicks 'remove image' button, id of fields after field changed -1.

eg: user has inserted 5 additional file fields using 'add image' button, , have clicked on 'remove image' button next file field id of '3', meaning '4', '5' , '6' should become '3', '4' , '5'.

edit:
current functionality:

the id's being subtracted accordingly, when new field added, continuing previous count. eg: if file fields '5' , '6' removed, 1 added, given id of '7'.

if of can me dilemma it'd appreciated. it's frying head little.

thanks in advance, rich

here efforts far:

$(document).ready(function() {  var count = 2; $('#addimage').click(function(){ var countnew = count++; $('#newsformcontainer #addimage').before( $('<div id="added"><br /><label for="' + countnew + '">image ' + countnew + '</label class="strong" ><br /><input type="file" class="file" name="' + countnew + '" id="' + countnew + '" accept=".png"></div>')); $('#newsformcontainer #addimage').before( $('<button id="' +  countnew + '" class="file" onclick="return false;">remove image</button>'));   $('button.file').click(function(){ var grabclass = document.queryselectorall('[class^=file]');  console.log(grabclass)  $(grabclass).attr('id', function(index){      return index + 1; }); $(this).prev('#added').remove(); $(this).remove(); });  var inputs = document.queryselectorall('[file^=file]').length; document.getelementbyid('cnt').value = inputs;  }); }); 

try running code; may solves problem

$('#add-item').on('click', function() {    var indexoflastitem = parseint($('ul>li:last').attr('data-index'));    if(!indexoflastitem){      indexoflastitem = 0;      }    indexoflastitem += 1;    $('ul').append('<li data-index="' + indexoflastitem + '">item ' + indexoflastitem + '<button>remove image</button></li>')  });      /**   * dynamically assigning event handler   *  other wise not work 'remove' buttons added in runtime   *   */  $(document).on('click', 'li> button', function() {    var indexofli = $(this).parent().attr('data-index');    var $currentli = $(this).parents('li');    var $itemsaftercurrent = $currentli.nextall();    console.log($itemsaftercurrent);      rearrangeitems($itemsaftercurrent);      $currentli.hide('slow', function() {      $(this).remove();    })    })    function rearrangeitems($itemsaftercurrent) {    $itemsaftercurrent.each(function() {      var index = $(this).attr('data-index');      index = parseint(index) - 1;      console.log(index);      $(this).attr('data-index', index);      $(this).html('item ' + index + '<button>remove image</button>');    });  }

li{    margin: 5px;    }  li>button{    margin: 0 3px;    cursor: pointer;    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <ul>    <li data-index="1">item 1 <button>remove image</button></li>    <li data-index="2">item 2<button>remove image</button></li>    <li data-index="3">item 3<button>remove image</button></li>    <li data-index="4">item 4<button>remove image</button></li>    <li data-index="5">item 5<button>remove image</button></li>    <li data-index="6">item 6<button>remove image</button></li>  </ul>    <button id="add-item">add image</button>