var factorsApp = null;


function search(val, spiece) {
    if (val == ''){
        document.getElementById('ul'+spiece).innerHTML = '';
    }
    else {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://genetics-api.swarmer.me/taxon?search=' + val, true);

        var text;
        var jsn;
        xhr.onload = function() {
            text = this.responseText;
            jsn = JSON.parse(text);

            document.getElementById('ul'+spiece).setAttribute('class', 'collection');
            document.getElementById('ul'+spiece).innerHTML = '';
            var inn = ''
            var size = jsn.length;
            if (size > 6)
                size = 6;
            for (var i=0; i<size; i++){
                inn += '<li id="' + jsn[i]['id'] + '" class="collection-item searchItem" onclick="selectItem(this,' + spiece + ')">' + jsn[i]['english_name']
                    + '</li>';
            }
            document.getElementById('ul'+spiece).innerHTML = inn;
        }

        xhr.onerror = function() {
            alert( 'Ошибка ' + this.status );
        }
        xhr.send();
    }
}


function clearUl(spiece) {
            // document.getElementById(spiece).value = '';
            // document.getElementById('ul'+spiece).innerHTML = '';
            // document.getElementById('ul'+spiece).setAttribute('class', '');

}

function selectItem(item, spiece) {
    document.getElementById(spiece.id).value = item.innerHTML;
    //document.getElementById(spiece.id).value = '';
    document.getElementById('ul'+spiece.id).innerHTML = '';
    document.getElementById('ul'+spiece.id).setAttribute('class', '');
    document.getElementById(spiece.id).setAttribute('val', item.id);
}

var globalId1;
var globalId2;

function processing(){
    var id1 = document.getElementById("firstSpiece").getAttribute("val");
    var id2 = document.getElementById("secondSpiece").getAttribute("val");

    globalId1 = id1;
    globalId2 = id2;

    clearPopulationLayers();

    addPopulationLayer(map, gradient1, id1);
    addPopulationLayer(map, gradient2, id2);

    getFactors(id1, id2);
}

function getFactors(id1, id2){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://genetics-api.swarmer.me/biotic_factor?taxon1_id=' + id1 + '&taxon2_id=' + id2, true);

    var text;
    var jsn;
    xhr.onload = function() {
        text = this.responseText;
        jsn = JSON.parse(text);
        console.log(jsn);

        if (factorsApp == null) {
            factorsApp = new Vue({
                el: '#factors',
                data: {
                    factors: jsn,
                    selectedFactors: [],

                    showFactors: function () {
                        console.log(factorsApp.selectedFactors);

                        clearFactors();

                        factorsApp.selectedFactors.forEach(function(factor) {
                            addFactor(factor);
                        }, this);

                        console.log(factorsApp.selectedFactors);
                    },

                    newFactor: function () {
                        drawingManager.setMap(map);
                    }
                }
            });
        } else {
            factorsApp.factors = jsn;
        }

        getAnimalInfo(id1, true);
        getAnimalInfo(id2, false);
    }

    xhr.onerror = function() {
        alert( 'Ошибка ' + this.status );
    }

    xhr.send();
}

function getAnimalInfo(id1, bol) {
    var val = '#tax1';
    if (bol == false){
        val = '#tax2';
    }

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://genetics-api.swarmer.me/taxon/' + id1, true);

    var text;
    var jsn;

    xhr.onload = function() {
        text = this.responseText;
        jsn = JSON.parse(text);

        var animalApp = new Vue({
            el: val,
            data: {
                taxon: jsn,
            }
        });
    }

    xhr.onerror = function() {
        alert( 'Ошибка ' + this.status );
    }
    xhr.send();
}

@@ -17,16 +17,64 @@
  null;%0D%0A
+var animalApp1 = null;%0D%0Avar animalApp2 = null;%0D%0A
 %0D%0A%0D%0Afunc
@@ -3980,29 +3980,408 @@
         
-var animalApp
+if (bol) %7B%0D%0A            if (animalApp1 == null) %7B%0D%0A                animalApp1 = new Vue(%7B%0D%0A                    el: val,%0D%0A                    data: %7B%0D%0A                        taxon: jsn,%0D%0A                    %7D%0D%0A                %7D);%0D%0A            %7D else %7B%0D%0A                animalApp1.taxon = jsn;%0D%0A            %7D%0D%0A        %7D else %7B%0D%0A            if (animalApp2 == null) %7B%0D%0A                animalApp2
  = new V
@@ -4390,32 +4390,40 @@
 (%7B%0D%0A            
+   
+     
 el: val,%0D%0A      
@@ -4420,32 +4420,40 @@
 l,%0D%0A            
+   
+     
 data: %7B%0D%0A       
@@ -4453,32 +4453,40 @@
                 
+   
+     
 taxon: jsn,%0D%0A   
@@ -4474,32 +4474,139 @@
    taxon: jsn,%0D%0A
+                    %7D%0D%0A                %7D);%0D%0A            %7D else %7B%0D%0A                animalApp2.taxon = jsn;%0D%0A
             %7D%0D%0A 
@@ -4596,32 +4596,32 @@
 %0A            %7D%0D%0A
+
         %7D);%0D%0A   
@@ -4609,26 +4609,24 @@
 %7D%0D%0A        %7D
-);
 %0D%0A    %7D%0D%0A%0D%0A 

Fix animal bugs