I have a piece of javascript that sets the number input value. However, it won't work. The input's value field is still empty after the call (although console.log() outputing the element's val() does show the correct value). I have tried setting the value three ways jQuery's .val(total), .attr('value', total), and with plain old .value =, and still nothing. I even replaced the entire element with html and the value concatenated into the value attribute, and it won't work.

Any ideas why this won't take?

Here's the markup:

```
<div id="proposal_price_box">
  <div class="proposal_price_header sys_bkgcolor">
    <span class="title"><h3>Price to Appear on Proposal</h3></span>
  </div>
  <div class="inner">
    <span class="label">$</span>
    <input type="number" class="amount-input" id="proposal_price" value=""/>
  </div>
</div>

```

And the pertinent javascript:

```
$('#proposal_price').val('1234');

```

Jsfiddle demonstrating the problem below.

<http://jsfiddle.net/n8z9K/12/>

Somehow, if the element's container is displayed, it will set the value. But as soon as its hidden again, it breaks.

**EDIT** Sorry, I didn't properly demonstrate the problem in JSfiddle. I am trying to clone the contents of the container and place it elsewhere. I've updated the jsfiddle to better show the issue.