help with splitting an application

[DigitalTina]

<script>window.onload = function () {

//Application 1: Dog 1
      var app_1 = new PIXI.Application($(window).width(),$(window).height(), { transparent: true });

      var dog1;
      document.getElementById('area').appendChild(app_1.view)

      $(window).resize(function () {
        app_1.renderer.resize( $(window).width(),$(window).height());
      });

      // load spine data
      PIXI.loader
        .add('dog1', 'assets/animate/dog1_skeleton.json')
        .load(onAssetsLoaded);

      app_1.stage.interactive = true;
      app_1.stage.buttonMode = true;

      function getRandomInt(max) {
        return Math.floor(Math.random() * Math.floor(max));
      }
      function scaleScene() {
        app_1.renderer.resize($("#area").width(), $("#area").height());


        var bottom_position_ratio = 50/800;

        dog1.position.set(app_1.screen.width / 4, app_1.screen.height - bottom_position_ratio*app_1.screen.height);


        var base_height = 800;
        var base_scale = .25;
        var ratio = .25 / 800;
        dog1.scale.set(ratio*app_1.screen.height);

      }
      $(window).resize(function () {
        scaleScene();
      });

      function onAssetsLoaded(loader, res) {
        console.log(res);
        dog1 = new PIXI.spine.Spine(res.dog1.spineData);

        // set current skin
        dog1.skeleton.setSkinByName('dog1_skin');

        // set up the mixes!
        // dog1.stateData.setMix('neutral_breth', 'head_l', 0.2);
        dog1.stateData.setMix('head_l', 'head_r', 0.4);
        dog1.stateData.setMix('head_r', 'head_l', 0.4);

        scaleScene();

        // play animation
        dog1.state.setAnimation(0, 'neutral_breth', true);
        dog1.state.setAnimation(1, 'tail_fast', true);

        app_1.stage.addChild(dog1);

        app_1.stage.on('pointertap', function () {
          // change current skin
          console.log('wgt>!');
          // dog1.stateData.setMix('head_l', 'neutral_breth', 0.4);
          // dog1.state.setAnimation(1, 'head_l', .04);
          // dog1.state.setAnimation(3, 'head_r', fal);

          var rand = getRandomInt(2);
          if (rand == 1) {
            dog1.state.setAnimation(3, 'head_l', false, 0);
          } else {
            dog1.state.setAnimation(3, 'head_r', false, 0);
          }
          rand = getRandomInt(3);

          setTimeout(function () {
            dog1.state.setAnimation(4, 'blink', false, 0);
          }, getRandomInt(2000));
          });
        console.log(document.body);
      }




//Application 2: Dog 2 ***********************************************
      var app_2 = new PIXI.Application($(window).width(),$(window).height(), { transparent: true });

      var dog2;
      document.getElementById('area').appendChild(app_2.view)

      $(window).resize(function () {
        app_2.renderer.resize( $(window).width(),$(window).height());
      });

      // load spine data
      PIXI.loader
        .add('dog2', 'assets/animate/dog2_skeleton.json')
        .load(onAssetsLoaded);

      app_2.stage.interactive = true;
      app_2.stage.buttonMode = true;

      function getRandomInt(max) {
        return Math.floor(Math.random() * Math.floor(max));
      }
      function scaleScene() {
        app_2.renderer.resize($("#area").width(), $("#area").height());


        var bottom_position_ratio = 50/800;

        dog2.position.set(app_2.screen.width / 4 + app_2.screen.width / 2 , app_2.screen.height -bottom_position_ratio*app_2.screen.height);


        var base_height = 800;
        var base_scale = .25;
        var ratio = .25 / 800;
        dog2.scale.set(ratio*app_2.screen.height);

      }
      $(window).resize(function () {
        scaleScene();
      });


      function onAssetsLoaded(loader, res) {
        console.log(res);
        dog2 = new PIXI.spine.Spine(res.dog2.spineData);

        // set current skin
        dog2.skeleton.setSkinByName('dog1_skin');

        // set up the mixes!
        // dog1.stateData.setMix('neutral_breth', 'head_l', 0.2);
        dog2.stateData.setMix('head_l', 'head_r', 0.4);
        dog2.stateData.setMix('head_r', 'head_l', 0.4);

        scaleScene();

        // play animation
        dog2.state.setAnimation(0, 'neutral_breth', true);
        dog2.state.setAnimation(1, 'tail_fast', true);

        app_2.stage.addChild(dog2);

        app_2.stage.on('pointertap', function () {
          // change current skin
          console.log('wgt>!');
          // dog1.stateData.setMix('head_l', 'neutral_breth', 0.4);
          // dog1.state.setAnimation(1, 'head_l', .04);
          // dog1.state.setAnimation(3, 'head_r', fal);

          var rand = getRandomInt(2);
          if (rand == 1) {
            dog2.state.setAnimation(3, 'head_l', false, 0);
          } else if (rand == 2) {
            dog2.state.setAnimation(3, 'head_r', false, 0);
          } else {
            dog2.state.setAnimation(3, 'fun', false, 0);
          }

          setTimeout(function () {
            dog2.state.setAnimation(4, 'blink', false, 0);
          }, getRandomInt(2000));
          });
        console.log(document.body);
      }


    }</script>

I originally had 1 application with 2 dogs animated inside. I now split the application so each dog is separate dog 1 and dog 2. But I did not split it correctly, as the dogs do not appear anymore. What mistakes do you see in this code? 

[xerver]

You added a resource to a loader that was already running, as the error states.

[ivan.popelyshev]

Next time just look a few topics beneath