Function Calling order issue with JQuery

Function Calling order issue with JQuery

Hi,

I'm beginner in JQuery, trying to develop a plugin/control  working like this http://jsfiddle.net/jddevight/esS4k/. I am populating  drop down list with an external Json file. Please see the code below before reading my problem in next line.
Issue: Issue is if i try to add multiple <div> in html page, i must have to follow the function caling order in selecttree.js file. See below please, if i define <div> in the order bellow.
  1. <div id="ahmadcontrol"></div>
  2. <div id="customformcontrol"></div>
I have to call function in select tree in reverse order as it shows in red text in selectree.js file. If i call in random order, except first, rest of the controls do not work properly. What could be the reason? I appreciate if someone reply with solution. Thanks

  1. <body>
    <div id="ahmadcontrol"></div>
    <div id="customformcontrol"></div>

    </body>





  2. selectree.js
  3. $.getScript('js/slctBxStub.js',function(){
  4. slctbxstub('data/selectTree/example.json','customformcontrol');
  5. });
  6. $.getScript('js/slctBxStub.js',function(){
  7. slctbxstub('data/selectTree/example.json','ahmadcontrol');
  8. });                       
  1. slctBxStub.js
  2. function slctbxstub(jsonfile,divid){
  3. var divelementabc=divid+"1";
  4.              document.getElementById(divid).innerHTML='<form  id="form1">'+
  5.         '<input type="text" class="inbx1" id='+divelementabc+' name="s" value="" />'+
  6.         '<input type="Button" id="buttonval" value="" class="icon4 ui-widget-content ui-corner-all"/> '+
  7.                  '</form>'+
  8.                    '<div id="tree1" class="tree">'+
  9.         '</div>';
  10. $('#selectProperty').on('click', function(){
  11.         $('#tree1').removeClass('hide').addClass('show');
  12.     });
  13.    
  14.     var tree = $('#tree1');
  15.     tree.tree({
  16.               dataUrl : jsonfile,
  17.         dataFilter: function(data) {
  18.             return data['properties'];
  19.         },       
  20.         autoOpen: false,
  21.         dragAndDrop: true,
  22.         selectable: true,
  23.         onCreateLi: function(node, $li) {
  24.             // Add 'icon' span before title
  25.             console.log(node);
  26.             var element = $li.find('.jqtree-title');
  27.             console.log(element);
  28.                 element.append('<span class="createicon"></span>');
  29.            
  30.         }
  31.     });
  32.         //tree.bind('tree.select', function(event){
  33.           // $('#'+divelementabc+'.inbx1' ).remove();
  34.                     $('#'+divid+'.inbx').remove();
  35.                  //  $('#'+divelementabc).//remove form element
  36.                 //    $('#'+divelementabc).append('<input type="text" size="25" id="inbx" value="'+event.node.name+'"/>');
  37.                   
  38.         //});
  39. tree.bind('tree.select', function(event){
  40.             console.log(event.node);
  41.             $('#'+divelementabc).val(event.node.name);
  42.         });
  43.        
  44.        
  45.         $('#'+divid).on('click', function(event){
  46.             tree.fadeIn('medium');
  47.         });
  48.        
  49.         tree.on('mouseleave', function(){
  50.             tree.fadeOut('medium');
  51.         });
  52.         tree.css('display','none');
  53.      // get the field position
  54.       var inputField = $('#searchwrapper');
  55.       var fieldDiv = $('#tree1');
  56.       var sf_pos    = inputField.offset();
  57.       var sf_top    = sf_pos.top;
  58.       var sf_left   = sf_pos.left;
  59.       // get the input field size
  60.       var sf_height = inputField.height();
  61.       var sf_width  = inputField.outerWidth();
  62.       fieldDiv.css("position","absolute");
  63.       fieldDiv.css("left", sf_left);
  64.       fieldDiv.css("top", sf_top + sf_height + 10);
  65.       fieldDiv.css("width", sf_width);
  66.    
  67. }