Adding custom (dynamically) views to a ScrollView on Button Click to create card

Hello everyone,

I'm stuck trying to get a very simple task to work on my app. Essentially, I want to be able to add view to a ScrollView when users click a button. Let's call this first view added a "Card".

Inside this card, I also have another scrollview which is supposed to then dynamically receive and display "categories" views.

Here's an image: http://d.pr/i/1457t

For the most part everything is working fine: when the "Add" button at the top is clicked, the "card" is created and I am able to see all of the information, HOWEVER, the problem is that each time I "Add" a card, I end up not only adding "categories" views to the current created card by a factor of 2, but also the same happens to the previously added cards. Like the following:

http://d.pr/i/14lZD I hope this makes sense.

Here's my code (my button event listener):

addViewButton.addEventListener('click', function(e) {
 
var url = "https://my.apilink.com";
var xhr = Titanium.Network.createHTTPClient();
xhr.open('GET', url);
 
xhr.onload = function() {
    var response = JSON.parse(this.responseText);
    var t = response.data.categories;
 
    var bons = [];
    for (var item in t) {
        bons.push(t[item]);
    }
    Ti.API.info("Data received" + bons);
    var resp = {
        response : bons
    };
     createCard(resp);
 
xhr.send();
 
};

And here's where it all happens (creating the views (cards)):

var scrollView = Ti.UI.createScrollView({
top : 130,
left : 0,
right : 0,
backgroundColor : 'white',
contentWidth : '100%',
showHorizontalScrollIndicator : false,
showVerticalScrollIndicator : true,
});
 
var topPosition = 20;
var leftPosition = 20;
var topPositionCat = 30;
 
var i = 0;
function createCard(_args) {
 
 var response = _args.response;
 Ti.API.info("REsponse" + response);
 
 
 
 var colorArr = ["red", "orange", "blue", "green", "pink", "yellow"];
 var fakeArray = ["card 0", "card 1", "card 2", "card 3"];
 var ranIndex = getRandom(colorArr.length);
 
  i++;
 
 
  for (var d = 0; d < response.length; d++) {
 
 
  var panelImage = Ti.UI.createView({
    backgroundColor : colorArr[ranIndex],
    top : topPosition + (i * 60),
    borderRadius : 5,
    borderColor : 'white',
    borderWidth : 2,
    id : i,
    bit : false,
    active : false,
    height : 350,
    width : 290,
});
//
 // //add a few attributes to the card
 var cardTitle = Ti.UI.createLabel({
    text : "I am card # " + i,
    top : 10,
    left : 0,
    color : 'black'
});
panelImage.add(cardTitle);
 
// // Add the EventListener  for the view.
panelImage.addEventListener('singletap', cardButtonHandler);
 
//Add scrollview and a card here
 
var leftPosition = 20;
 
 
    if (d % 2 == 0) {
        leftPosition = 20;
    } else {
        leftPosition = 180;
    }
 
    var panelImageCat = Ti.UI.createView({
        backgroundImage : '/images/row_bg.png',
        top : topPositionCat,
        left : leftPosition,
        height : 100,
        width : 100,
    });
 
 
    var catImageButton = Ti.UI.createImageView({
        image : response[d].icon,
        name : response[d].name,
        id : response[d].id,
        icon : response[d].icon,
        width : 90,
        height : 90,
        top : 4
    });
    panelImageCat.add(catImageButton);
 
    var catName = Ti.UI.createLabel({
        text : response[d].name,
        textAlign : 'center',
        color : 'black',
        top : 3,
        font : {
            fontWeight : 'bold'
        }
 
    });
 
    panelImageCat.add(catName);
 
    if (leftPosition == 180) {
        topPositionCat = topPositionCat + panelImageCat.height + 10;
    }
 
    // add the view in scroll view
    catScrollView.add(panelImageCat);
 
    panelImage.add(catScrollView);
 
 
    // Add the EventListener  for the view.
    catImageButton.addEventListener('click', function(e) {
        alert(e.source.name);
 
    });
 
 
  }// END FOR LOOP
 catScrollView.contentHeight = topPositionCat + 20;
 
// add the view in scroll view
scrollView.add(panelImage);
 
}

Of course there's more code for when users tap on each "card" etc. But that's irrelevant.

This is probably very simple to solve. I suspect it has to do with how I am setting up the loops to create each card and its corresponded categories views etc. Any help, guidance is highly appreciated.

Thank you!