JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
 <script src="http://172.30.48.47:8090/customer_insight/scripts/knockoutjs/knockout-3.1.0.js"></script>
    <div id="promo-migration-detail">
       
        <div data-bind="foreach: { data: allSegments}">
           <input type="checkbox" class="checkbox_check" data-bind="click: $parent.addPerson">
               <label data-bind="text: name"></label>
                <div class="promo-container" style="margin-top: 30px;margin-left: ‒20;margin-left: 20px;">
                    <div class="promo-title" data-bind="text: name"></div>
                    <div class="promo-content" data-bind="attr: { id: id}"></div></div></div>

JavaScript

var Segment = function(name,id) {
	var self = this;
    
    self.name = name;
	self.id = id;
    
};




var listOfSegments = [
   new Segment("Age","abcd1"),
   new Segment("gender","abcd2"),
    new Segment("value","abcd3")
];
  
  
  
  	 var oPromobehaviouralModel=null;
  
	var PromobehaviouralModel = function() {
	// Data
    var self = this;

	    // Editable data
    self.allSegments = ko.observableArray();
	self.allSegmentsCategory = ko.observableArray([]);
        
        
        
     self.addPerson=function(segment1) {
		
		alert(JSON.stringify(segment1))
		alert("Before--->>>"+self.allSegments().length)
		self.allSegments.remove(segment1) ;
		alert("After--->>>"+self.allSegments().length) 
      
        };
   
	
    //methods
 	self.addSegments = function(segment) {
  //      alert(segment.name)
 		self.allSegments.push(segment);
    };
	
	
    }
    oPromobehaviouralModel = new PromobehaviouralModel();
oPromobehaviouralModel.addSegments(new Segment("Age","abcd1"));
oPromobehaviouralModel.addSegments(new Segment("gender","abcd2"));
oPromobehaviouralModel.addSegments(new Segment("value","abcd3"));


  ko.applyBindings(oPromobehaviouralModel);