how do I dynamically print out a page that is loaded into text boxes?

Question

I have a blur function that writes to the data base

$(".thoughts_box").blur(function(){
            var box_id= $(this).attr("id").split("_")[$(this).attr("id").split("_").length-1];
    writeListValue(1,box_id,$(this).val());     
});

Here is my table

<td><input class="printArea_1 thoughts_box" name="activities_thoughts_1" id="activities_thoughts_1" type="text" style="width:345px;" placeholder="Type or click list button &gt;" /></td>
    <td><input type="button" id="thoughts_1"  class="list_btn ext_thoughts" value="List &gt;" name="_1" /></td>
</tr>

here is how I am printing it out

function print_list() {
$('input[id=printLoad_1]').val($('input[class=printArea_1]').val());
$('input[id=printLoad_2]').val($('input[class=printArea_2]').val());
$('input[id=printLoad_3]').val($('input[class=printArea_3]').val());
$('input[id=printLoad_4]').val($('input[class=printArea_4]').val());
$('input[id=printLoad_5]').val($('input[class=printArea_5]').val());
for( var i=1; i<=5; i++ ) {
  if( document.getElementById('printLoad_'+i).value === '' ) {
      document.getElementById('num_'+i).style.display = 'none';
  }
}
    $(".printing_list").printElement(
        {
        overrideElementCSS:[
            '/css/print_fixer.css',
            { href:'/css/print_fixer.css',media:'print'}],
        //leaveOpen:true,
        //printMode:'popup',

        });
}

here is the page that prints out I need to find a way to dynamically print out what the user puts into the text fields. can anybody please help me.

    <div class="printing_list" id="printList" >
      <img id="print_logo" src="/images/print_header_med.png">
  <div align="left" id="printHead_text"></div>
      <br />
  <div align="left" class="listPrint_info" style="width:700px;"></div>
      <br /><br />          

    <table  width="100%" style="line-height:0px; margin-left:20px;" >
        <tr id="num_1">
            <td><input id="printLoad_1" type="text" style="width:700px;" />
    </td>
        </tr>
        <tr id="num_2">
            <td><input id="printLoad_2" type="text" style="width:700px;" />
     </td>
        </tr>
        <tr id="num_3">
            <td><input id="printLoad_3" type="text" style="width:700px;" />
       </td>
        </tr>
        <tr id="num_4">
            <td><input id="printLoad_4" type="text" style="width:700px;" />
        </td>
        </tr>
        <tr id="num_5">
            <td><input id="printLoad_5" type="text" style="width:700px;" />
         </td>

         </table>
         </div>

Answer 1

elclanrs has the right idea. The code you wrote isn't maintainable. Try something like this:

// My print_list function assumes that I have some textboxes that are class
// textboxClass
function print_list() {
    Array.filter( document.getElementsByClassName('textboxClass'), function(elem){
        $(".printing_list").printElement( elem );
    });
}

If you assign class textboxClass to all of your text boxes, this will loop through each of them, and you can do whatever you want.