How can store html DOM elements with applied inputed values as string

I want to store div as a whole in DB. After then I’d like to preview this page from the stored string value in DB. If I use $(selector).html() then I can get only HTML elements with not apply inputed value. Suppose my page is writed as follows.

<div id="test_div">
    <span>this is test</span>
    <select>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>
    <textarea>This is test</textarea>
</div>

I input some text in the Text area and select a special option in the Select box. After then I want to store this page state as a string.

I write code as following and save this in DB.

var content = $("#test_div").html();

But I can’t get applied value.

I want to get like this. (When I select option3 and add text “Welcome!” in textarea)

    <span>this is test</span>
    <select>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3" selected>option3</option>
        <option value="4">option4</option>
    </select>
    <textarea>This is test. Welcome!</textarea>

How can I do it? Thank you.

Answer

This was wrong to attempt it. The design itself was wrong and that doing so caused many problems. The customer who required this method proposed a different method and solved the problem by storing all information from the table as individual tables.**