I have a form that essentially has 3 parts:

Single Line 

Drop-down

Table

The drop-down is populated by the input of the Single Line. This works fine. The issue I'm having is when a user adds rows to a table, then deletes the first row of the table and then decides to add rows back - the drop-down breaks. The data disappears and I'm unable to even click the drop-down. It looks like this: 

You can see it's barely trying to show on the bottom side, however there is no data in the field, where as there was prior to the deleting of the first row and then re-adding rows. 

I've noticed that if I delete the added rows from the bottom up, not including the first row, and then add rows back, everything works fine. The issue is only when the first row is deleted and then rows are added back. The reason I'm running into this issue is because I'm trying to include an additional field where the user can put the number of rows they need (so instead of clicking add 15 times, they just write 15 and it auto-adds the rows). My code performs this action fine, except that it breaks the drop-down. Here is my Javascript:

$(document).ready(function () {
  $('.rows').change(row);

function row() {
  setTimeout(function(){
  
  var rownumber = $('.rows input').val();
	$('.form-del-field').trigger('click'); //Deletes all rows
		for (i=0; i < rownumber; i++){
			$('#q4').trigger('click'); 
		}}, 1000); //create each new row
	}	 
});

I included the timeout function because I thought maybe it was a timing issue, but it is not. Does anyone have any idea how to either fix this, or work around it? I'm not too skilled in Javascript, so if there is a way to simply delete from the bottom up I would be fine with that option as well. 

I'm using Forms 9.2. The field I've added for the user to enter the number of rows in the table has a class "rows". Let me know if you need anything else to help!

Thanks