JSFiddle - React, Tailwind, and code Playground

by BiancaKuehweidner

HTML

<div id="departure">

  <div class="box">
     <p class="travelProgram">AN 1
        <input type="checkbox" id="cb1" ng-filekeys=",123456" />
     </p>
  </div>
  <div class="box">
     <p class="travelProgram">AN 2
        <input type="checkbox" id="cb2" ng-filekeys=",011223" />
     </p>
  </div>
  <div class="box">
     <p class="travelProgram">AN 3
        <input type="checkbox" id="cb3" ng-filekeys=",*00LLA,6QJHKC,6Y63L2,654321" />
     </p>
  </div>
</div>
<hr />
<div id="return">

  <div class="box">
     <p class="travelProgram">AB 1
        <input type="checkbox" id="cb4" ng-filekeys=",123456" />
     </p>
  </div>

  <div class="box">
     <p class="travelProgram">AB 2
        <input type="checkbox" id="cb5" ng-filekeys=",654321" />
     </p>
  </div>
  
  <div class="box">
     <p class="travelProgram">AB 3
        <input type="checkbox" id="cb6" ng-filekeys=",471199" />
     </p>
  </div>
  
</div>

JavaScript

$(function () {
    checkItem();    
});

function intersection(leistung_an, leistung_ab)
{
  var result = leistung_an.filter(function(n) {
    return leistung_ab.indexOf(n) > -1;        
  });
   
  return result;
}

  
function checkItem(direction, cb) {
    var FilekeysAnreise = [];
    var FilekeysAbreise = [];

    var FilekeysAnreiseMap = [];
    var FilekeysAbreiseMap = [];
    
		$("#departure .box .travelProgram input[type='checkbox']").each(function() {
				var anReiseItem = $(this).attr("ng-filekeys");
				var arrReiseItem = anReiseItem.split(",");        
				arrReiseItem.splice(0, 1);
        
      	for(var i=0; i<arrReiseItem.length; i++) {
					FilekeysAnreise.push(arrReiseItem[i]);
					FilekeysAnreiseMap[arrReiseItem[i]] = $(this).attr("id");
				}
		});
		
    $("#return .box .travelProgram input[type='checkbox']").each(function() {
				var abReiseItem = $(this).attr("ng-filekeys");
				var arrReiseItem = abReiseItem.split(",");
				arrReiseItem.splice(0, 1);
        
        for(var i=0; i<arrReiseItem.length; i++) {
  				FilekeysAbreise.push(arrReiseItem[i]);
  				FilekeysAbreiseMap[arrReiseItem[i]] = $(this).attr("id");
				}
    });            

 		var result = intersection(FilekeysAnreise, FilekeysAbreise); 		    
    var InitialResult = $.merge([], result);
 
   //first time use
   if(direction == undefined) {
   
      $("#" + FilekeysAnreiseMap[result[0]]).attr("checked",true);
      $("#" + FilekeysAbreiseMap[result[0]]).attr("checked",true);
      
   } else {
      
      if(direction == "departure") {
      
      		FilekeysAnreise = [];
    			FilekeysAnreiseMap = [];
    			arrReiseItem = [];
          
          anReiseItem = $("#departure .box .travelProgram input:checkbox[id*=" + cb + "]").attr("ng-filekeys");
          arrReiseItem = anReiseItem.split(",");
          arrReiseItem.splice(0, 1);

          for(var i=0; i<arrReiseItem.length; i++) {
            FilekeysAnreise.push(arrReiseItem[i]);
           ...