Dynamically readjusting fields sequence on remove method

Question

I added two fields in my form; "Event Data" and "Event Details" using JavaScript. It facilitates the user to add as many events as he wants. Everything is working perfect except the following two issues.

If I add let's say 5 events and remove the no. 2 event. The sequence of the rest of my events is like this 1,3,4,5 but they are supposed to look like 1,2,3,4
Also, after removal of the no. 2 event, if I add the new event, it is created at number 5; so my sequence of events looks like this 1,3,4,5,5..

How can I modify my script to make my events rearrange automatically?

var tableCount = 1;
var index = 1;

$(document).on('click', 'button.add_time', function(e) {
  e.preventDefault();
  tableCount++;

  $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');

  $('#timeTable' + tableCount).find("input").val("");

  index++;
  $('#timeTable' + tableCount + ' .aa').html(tableCount);
});

$(document).on('click', 'button.removeTime', function() {
  var closestTable = $(this).closest('table');
  if (closestTable.attr('id') != "timeTable") {
    closestTable.remove();
  }
  tableCount--;
  if (tableCount < 1) {
    tableCount = 1;
  }
  return false;
});



  
    
      1
      
        
      

      
        
      
    

    
      1
      Event Description:

user_10606400 · Answer

You can create some function which will get called everytime you clicked on remove button .In this function you need to loop through all tables leaving first one and then use .find() to add new value i.e : count to that td where 1,2..etc are displayed.Also , you need to change id of your table using $(this).attr("id", "timeTable" + newvalue);

Demo Code :

var tableCount = 1;
var index = 1;

$(document).on('click', 'button.add_time', function(e) {
  e.preventDefault();
  tableCount++;

  $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');

  $('#timeTable' + tableCount).find("input").val("");

  index++;
  $('#timeTable' + tableCount + ' .aa').html(tableCount);
});

$(document).on('click', 'button.removeTime', function() {
  var closestTable = $(this).closest('table');
  if (closestTable.attr('id') != "timeTable") {
    closestTable.remove();
  }
  tableCount--;
  resetValues(); //call to reset values
  if (tableCount < 1) {
    tableCount = 1;
  }
  return false;
});


function resetValues() {
  counter = 2; //initialze to 2 because 1 is fixed
  //looping through table not first one
  $(".tg:not(:first)").each(function() {
    //find .aa class replace its counter
    $(this).find('.aa').text(counter);
    $(this).attr('id', "timeTable" + counter);
    counter++;
  })
}



  
    
      1
      
        
      

      
        
      
    

    
      1
      Event Description:

Dynamically readjusting fields sequence on remove method

1 Answers