Deleting multiple rows from a table with one click

I have a table and I am trying to iterate through the rows and delete certain rows. The end result is to collapse a group of rows. So all the rows that have a property called expandable and I use that as a way to delete the rows in between the rows with the collapsible vale of 1. My problem is that rows are being deleted from outside the area where they should be deleted. I have created some example code below that recreates the issue. If you run the code and click on the image on the left in the top row two of the three rows below the top row are deleted and also one row from the middle section of rows. If you then click on the second image from the top the row with the third image is deleted along with some other rows that should be deleted.

What I was shooting for was to click on the image and have the rows below the image deleted down to the next image. Any help is appreciated.

//FirstView Component Constructor
function FirstView() {
    //create object instance, a parasitic subclass of Observable
    var self = Ti.UI.createView({
        backgroundColor:'#222222'
    });
 
var tableData = [];
 
var i = 0;
 
var row1 = Ti.UI.createTableViewRow({
    hasCheck:1,rowIndex:i++,expandable:1,height:50
});
 
imgCollapse = Ti.UI.createImageView({
    left:5,width:40,height:40,image:'iconCollapse.png',myImage:'collapse',id:'image'
});
 
row1.add(imgCollapse);      
tableData.push(row1); 
 
var row21 = Ti.UI.createTableViewRow({
    hasCheck:1,rowIndex:i++,expandable:0,height:50
});
tableData.push(row21);  
 
var row22 = Ti.UI.createTableViewRow({
    hasCheck:1,rowIndex:i++,expandable:0,height:50
});
 
tableData.push(row22); 
 
var row23 = Ti.UI.createTableViewRow({
    hasCheck:1,rowIndex:i++,expandable:0,height:50
});
tableData.push(row23); 
 
var row3 = Ti.UI.createTableViewRow({
    hasCheck:1,rowIndex:i++,expandable:1,height:50
});
 
imgCollapse = Ti.UI.createImageView({
    left:5,width:40,height:40,image:'iconCollapse.png',myImage:'collapse',id:'image'
});
 
row3.add(imgCollapse);      
tableData.push(row3); 
 
var row31 = Ti.UI.createTableViewRow({
    hasCheck:1,rowIndex:i++,expandable:0,height:50
});
 
tableData.push(row31); 
 
var row32 = Ti.UI.createTableViewRow({
    hasCheck:1,rowIndex:i++,expandable:0,height:50
});
 
tableData.push(row32); 
 
var row33 = Ti.UI.createTableViewRow({
    hasCheck:1,rowIndex:i++,expandable:0,height:50
});
tableData.push(row33); 
 
 
var row4 = Ti.UI.createTableViewRow({
    hasCheck:1,rowIndex:i++,expandable:1,height:50
});
 
imgCollapse = Ti.UI.createImageView({
    left:5,width:40,height:40,image:'iconCollapse.png',myImage:'collapse',id:'image'
});
 
row4.add(imgCollapse);      
tableData.push(row4); 
 
var row41 = Ti.UI.createTableViewRow({
    hasCheck:1,rowIndex:i++,expandable:0,height:50
});
 
tableData.push(row41); 
 
var row42 = Ti.UI.createTableViewRow({
    hasCheck:1,rowIndex:i++,expandable:0,height:50
});
 
tableData.push(row42); 
 
var row43 = Ti.UI.createTableViewRow({
    hasCheck:1,rowIndex:i++,expandable:0,height:50
});
tableData.push(row43); 
 
 
 
var tableView = Ti.UI.createTableView({
  backgroundColor:'white',
  data:tableData
});
 
self.add(tableView);
 
    tableView.addEventListener('click', function(e){
 
    if (e.source.id === 'image') {
 
        var rows = tableView.data[0].rows;
        for (var i = 0; i < rows.length; ++i) {
            if (rows[i].rowIndex > e.rowData.rowIndex) {
                if (rows[i].expandable == 1) {
                    break;
                }else{
                    tableView.deleteRow(i);
                }
            }
        }       
    }
});
 
    return self;
}
 
module.exports = FirstView;