These questions are from looking at the single page app sample located here. Can anyone explain why attempts to set the value of an input control with jQuery does/does not work with the following conditions?

I will include the HTML that is constant and then present a series of Javascript lines that I can't explain the behavior.

First the HTML.

    

        

            

                

                    

                        Region
                        
                    
                
            
        
    

1. If I run this code it works as expected and the input box has a value of 99. Note that I'm setting the value in two different places because of the issue I found in the next sample.

   $("#regionfield").val(44);
   var $entry = $("div").find(".data-container");
   $entry.find("#regionfield").val(99);
   

2. But if I remove that first line of code and just run this below the value of the input is "test". Why does setting the value fail now when it worked in the first instance?

   var $entry = $("div").find(".data-container");
   $entry.find("#regionfield").val(99);
   

3. Now if I save the HTML from the first code into a string, empty the control, then load it back, why does this code not result in the updated value of 99 but instead has the original value of "test"?

   $("#regionfield").val(44);
   var $entry = $("div").find(".data-container");
   $entry.find("#regionfield").val(99);
   var output = '';
   output += $entry.html();
   $entry.empty();
   $entry.html(output);
   

Update: I just noticed that I get different results when testing with Bootply vs Codeply. With Bootply the result for code sample #1 is 99 but on Codepl the result is "test". This makes me suspect the behavior is related to Bootstrap.