Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kolokviusmka2017- del2</title>
    <script src="jquery/jquery-1.11.1.min.js"></script>
    <script src="jquery/jquery.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="jquery/jquery-ui.min.css">
    <link rel="stylesheet" href="jquery/jquery-ui.css">
    <link rel="stylesheet" href="jquery/jquery-ui.structure.css">
    <link rel="stylesheet" href="jquery/jquery-ui.theme.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <style type="text/css">
        .selectable .ui-selecting { background: #FECA40; }
        .selectable .ui-selected { background: #F39814; color: white; }
        .selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
        .selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
        .list-item
        {
            list-style-type: none;
            border: 1px solid black;
            width:50%;
        }
    </style>

</head>
<body>
<button id="button">Click me to get informations</button>
<ul class="sortable" id="2016-Drivers">
    <h2>2016 Drivers</h2>
</ul>
<br>
<br>
<ul class="sortable" id="2017-Drivers">
    <h2>2017 Drivers</h2>
</ul>
<br>
<br>
<ul class="sortable" id="favorite">

</ul>
<script type="text/javascript">
    var year2016;
    year2016 = parseInt(year2016);
    year2016 = 2016;
    console.log(year2016);
    var year2017;
    year2017 = parseInt(year2017);
    year2017 = 2017;
    console.log(year2017);
    var temp1;
    var temp2;
    $(document).ready(function () {
        $('#2016-Drivers').sortable({
            connectWith: '#favorite',
            connectWith: '#2017-Drivers'
        });
        $('#2017-Drivers').sortable({
            connectWith: '#favorite',
            connectWith: '#2016-Drivers'
        });
        $('#favorite').sortable({
            connectWith: '#2016-Drivers',
            connectWith: '#2017-Drivers'
        });
        $('#button').on('click',function () {
           var url1 =  "http://ergast.com/api/f1/" +year2016+"/drivers.json"
            $.ajax({
                url: url1,
                dataType: 'json',
                success: function (data1) {
                    temp1 = data1;
                    console.log(temp1);
                    var drivers2016 = data1.MRData.DriverTable.Drivers;
                    //console.log(drivers2016);
                    for(var i=0;i<drivers2016.length;i++)
                    {
                        var name1 = drivers2016[i].givenName;
                       // console.log(name1);
                        var surname1 = drivers2016[i].familyName;
                        //console.log(surname1);
                        /*var permamentNumber1 = drivers2016[i].permanentNumber;
                       // console.log(permamentNumber1);
                        var dateOfBirthd1 = drivers2016[i].dateOfBirth;
                       // console.log(dateOfBirthd1);
                        var nationality1 = drivers2016[i].nationality;
                       // console.log(nationality1);
                        var driverUrl1 = drivers2016[i].url; */
                        //console.log(driverUrl1);
                        $('#2016-Drivers').append(
                            "<li class='list-item'>"+name1+ ' ' +surname1+"</li>"
                        );
                        var listItemArray = $('.list-item');
                       console.log(listItemArray);
                    }
                   /*$(document).on('click','.list-item' , function() {
                        $('.list-item').append(
                            "<p class='informations-2016'>"+permamentNumber1+"</p>"+"<br>"+"<p class='informations-2016'>"+dateOfBirthd1+"</p>"+"<p class='informations-2016'>"+nationality1+"</p>"+"<br>"+"<p class='informations-2016'>"+driverUrl1+"</p>"
                        )
                    });
                    $('.informations-2016').hide();*/
                   for(var j=0;i<listItemArray.length;j++)
                   {
                       $(this).on('click', function() {
                           for(i=0;i<drivers2016.length;i++)
                           {
                               var permamentNumber1 = drivers2016[i].permanentNumber;
                               // console.log(permamentNumber1);
                               var dateOfBirthd1 = drivers2016[i].dateOfBirth;
                               // console.log(dateOfBirthd1);
                               var nationality1 = drivers2016[i].nationality;
                               // console.log(nationality1);
                               var driverUrl1 = drivers2016[i].url;
                               //console.log(driverUrl1);
                           }
                           $(this).append(
                               "<p class='informations-2016'>"+permamentNumber1+"</p>"+"<br>"+"<p class='informations-2016'>"+dateOfBirthd1+"</p>"+"<p class='informations-2016'>"+nationality1+"</p>"+"<br>"+"<p class='informations-2016'>"+driverUrl1+"</p>"
                           )
                       });
                       $('.informations-2016').hide();
                   }

                }
            });
        });

    });

</script>
</body>
</html>