How Separate Counter Click

Good evening, My problem is how separate 'First Counter', 'Second Counter', 'Third Counter', that will be count separately. But in GreyDiv and RedDiv must be the same number count

Solution 1:

Okay so here it goes, I upgraded the previous code to use a class that contains your counter values:

class DivCounter {
    // constructor for new object;
    constructor(numberOfDivs) {
        this.divCtrs = [[],[],[]];
        this.numberOfDivs = numberOfDivs; // initial number of div in view
        for (let i = 0; i < this.numberOfDivs; i++) {
        	this.divCtrs[0][i] = 0;
            this.divCtrs[1][i] = 0;
            this.divCtrs[2][i] = 0;
        }
    }

	// initialize new counter div values
    createDivCounters() {
        this.divCtrs[0].push(0);
        this.divCtrs[1].push(0);
        this.divCtrs[2].push(0);
    }

    // start count on specific counter div
    startCount(key, ndx) {
        this.divCtrs[key][ndx]++;
        return this.divCtrs[key][ndx];
    }

    // set current div count
    set currentDivCount(val) {
        this.numberOfDivs = val;
    }
    
    // get current div count
    get currentDivCount() {
        return this.numberOfDivs;
    }
}


var divObj = new DivCounter(1); // instantiate DivCounter class passing initial number of divs present
var red = 0; // initially red is closed;

$('.AddDiv').on('click', function() {
    let numberDiv = divObj.currentDivCount; // get current div count
    divObj.createDivCounters(); // initialize new counters

    // grey div
    let $list = $('<div>', {
        class: 'List'
    }).append(
        $('<div>', {
            class: 'count',
            id: 'divList_' + numberDiv,
            text: 'First Counter'
        }), // we can use comma instead of .append() i.e. .append(div1, div2, div3)
        $('<div>', {
            class: 'countSecond',
            id: 'divListSecond_' + numberDiv,
            text: 'Second Counter'
        }),
        $('<div>', {
            class: 'countThird',
            id: 'divListThird_' + numberDiv,
            text: 'Third Counter'
        })
    );

    // red div
    let $container = $('<div>', {
        class: 'container'
    }).append(
        $('<div>', {
            class: 'count',
            id: 'div_' + numberDiv,
            text: 'First Counter'
        }),
        $('<div>', {
            class: 'countSecond',
            id: 'divSecond_' + numberDiv,
            text: 'Second Counter'
        }),
        $('<div>', {
            class: 'countThird',
            id: 'divThird_' + numberDiv,
            text: 'Third Counter'
        })
    );

    if (red) {
        $list.css('display', 'none');
        $container.css('display', 'block');
    } else {
        $list.css('display', 'block');
        $container.css('display', 'none');
    }

    $('.Wrap').prepend($container, $list);
    divObj.currentDivCount = ++numberDiv; // increment current div count

});


$(document).on('click', 'div[id^="div"]', function() {
    let id = $(this).attr('id').split('_'),
        ndx = parseInt(id[1]),
        container = id[0];

    let $target1 = $target2 = $(''),
        targetKey;

    if (container === 'divList' || container === 'div') {
        $target1 = $(`#div_${ndx}`);
        $target2 = $(`#divList_${ndx}`);
        targetKey = 0;
    } else if (container === 'divListSecond' || container === 'divSecond') {
        $target1 = $(`#divSecond_${ndx}`);
        $target2 = $(`#divListSecond_${ndx}`);
        targetKey = 1;
    } else if (container === 'divListThird' || container === 'divThird') {
        $target1 = $(`#divThird_${ndx}`);
        $target2 = $(`#divListThird_${ndx}`);
        targetKey = 2;
    }

    let increment = divObj.startCount(targetKey, ndx);
    $target1.text(increment);
    $target2.text(increment);
});

$(".GreyDiv").on("click", function() {
    red = 0;
    $(".container").css({
        display: 'none'
    });
    $(".List").css({
        display: 'block'
    });
});

$(".RedDiv").on("click", function() {
    red = 1;
    $(".container").css({
        display: 'block'
    });
    $(".List").css({
        display: 'none'
    });
});

.Wrap {
    width: 650px;
    height: 800px;
}

.container {
    position: relative;
    top: 5px;
    left: 5px;
    width: 320px;
    height: 120px;
    background-color: red;
    float: left;
    margin-left: 5px;
    margin-top: 5px;
    display: none;
}

.List {
    position: relative;
    top: 5px;
    left: 5px;
    width: 300px;
    height: 120px;
    background-color: rgba(200, 200, 200, 1);
    float: left;
    margin-left: 5px;
    margin-top: 5px;
}

.AddDiv {
    position: absolute;
    top: 0px;
}

.GreyDiv {
    position: absolute;
    top: 0px;
    left: 170px;
}

.RedDiv {
    position: absolute;
    top: 0px;
    left: 250px;
}

.count {
    position: absolute;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 250px;
    top: 50%;
    margin-top: -15px;
    background-color: white;
    text-align: center;
    cursor: pointer;
}

.countSecond {
    position: absolute;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 150px;
    top: 50%;
    margin-top: -15px;
    background-color: white;
    text-align: center;
    cursor: pointer;
}

.countThird {
    position: absolute;
    width: 30px;
    height: 30px;
    position: relative;
    left: 50px;
    top: 50%;
    margin-top: -15px;
    background-color: white;
    text-align: center;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
    <div class="container">
        <div class="count" id="div_0">First Counter</div>
        <div class="countSecond" id="divSecond_0">Second Counter</div>
        <div class="countThird" id="divThird_0">Third Counter</div>
    </div>
    <div class="List">
        <div class="count" id="divList_0">First Counter</div>
        <div class="countSecond" id="divListSecond_0">Second Counter</div>
        <div class="countThird" id="divListThird_0">Third Counter</div>
    </div>
</div>
<button class="AddDiv">AddDiv</button>
<button class="GreyDiv">GreyDiv</button>
<button class="RedDiv">RedDiv</button>

Solution 2:

So I pretty much changed your HTML/JavaScript. Instead of having 2 elements that show up whenever user changes color, now it just changes color of the same element.

HTML:

<div class="Wrap">
</div>
<button class="AddDiv">AddDiv</button>
<button class="GreyDiv">GreyDiv</button>
<button class="RedDiv">RedDiv</button>

JS:

function CounterObj() {
    // Current object instance
  var currentObj = this;
  this.currentInstance = objectsNumber
  this.firstCounter = 0;
  this.secondCounter = 0;
  this.thirdCounter = 0;

  // Our html object
  this.objCreation = function() {
    var $list = $('<div>', {
      class: 'List',
        // New object will have same color as the rest
      style: 'background-color:' + currentColor + ';'
    }).append(
      $('<div>', {
        class: 'count',
        id: 'div_' + this.currentInstance,
        text: this.firstCounter
      })).append(
      $('<div>', {
        class: 'countSecond',
        id: 'divSecond_' + this.currentInstance,
        text: this.secondCounter
      })).append(
      $('<div>', {
        class: 'countThird',
        id: 'divThird_' + this.currentInstance,
        text: this.thirdCounter
      }));

    // Add new counter List(I have no idea how to call it) to the page
    $('.Wrap').prepend($list);

    // Increment objects counter
    objectsNumber++;
  };

  // Invoke method from above on every new CounterObj creation
  this.objCreation();

  // Increment specific counter when specific "button" is clicked
  this.firstButton = $('#div_' + this.currentInstance);
  this.firstButton.on('click', function() {
    $(this).html(++currentObj.firstCounter);
  });

  this.secondButton = $('#divSecond_' + this.currentInstance);
  this.secondButton.on('click', function() {
    $(this).html(++currentObj.secondCounter);
  });

  this.thirdButton = $('#divThird_' + this.currentInstance);
  this.thirdButton.on('click', function() {
    $(this).html(++currentObj.thirdCounter);
  });
}

var objectsNumber = 0;
var currentColor = 'rgba(200, 200, 200, 1)';

// Start with one "List" already in place
new CounterObj();

// Add new "List" and change color events
$('.AddDiv').on('click', function() {
  new CounterObj();
});
$('.GreyDiv').on('click', function() {
  currentColor = 'rgba(200, 200, 200, 1)';
  $('.List').css('background-color', currentColor);
});
$('.RedDiv').on('click', function() {
  currentColor = 'red';
  $('.List').css('background-color', currentColor);
})

Working JSFiddle