I'm trying to load html into the div's (which ever is empty) but the following code fails to work properly. Instead, it loads html in the same (div1) everytime, overriding previously loaded html.

2.                 <div id="Div1" Class="col-sm-3 hidden"></div>
3.                 <div id="Div2" Class="col-sm-3 hidden"></div>
4.                 <div id="Div3" Class="col-sm-3 hidden"></div>

2.  $.each(chkUnivIDs, function (index, value) {
3.                            DisplayUnivInfo(univID);
4.                        });
5. 
   
6. 
   
7. var univID;
8. function DisplayUnivInfo(tID) {
9. var chkDiv = ""; univID=tID;
11.  if ($('#Div1').html() == "" && chkDiv == "") {
12.            DisplayIn($("#Div1"));
13.            $('#Div1').removeClass('hidden');
14.            chkDiv = "Not Empty";
15.          }
16.         else if ($('#Div2').html() == "" && chkDiv == "") {
17.             DisplayIn($("#Div2"));
18.             $('#Div2').removeClass('hidden');
19.             chkDiv = "Not Empty";  
20.         }
21.         else if ($('#Div3').html() == "" && chkDiv == "") {
22.             DisplayIn($("#Div3"));          
23.             $('#Div3').removeClass('hidden');
24.             chkDiv = "Not Empty";          
25.          }
26. }
27. 
    
28. 
    
30.  function DisplayIn(ele1) {        
31.         $.ajax({
32.             url: '@Url.Action("Action", "Controller")',
33.             cache: false,
34.             async: false,
35.             data: { id: univID},
36.             success: function (r) {
37.                $(ele1).html(r);
38.                //$(ele1).append(r);
39.             },
40.             error: function (r) {
41.                 alert("Ajax Error: failed to load");
42.            }
43.         });
44.     }