Avoiding duplicate code between php and javascript

I have a php page with a form on it for adding people to a small group.

For each person being added, there is a with multiple form elements, each named according to the person's number. For example:

<div class="user">
<input type="text" name="user1LastName" />
...
</div>
<div class="user">
<input type="text" name="user2LastName" />
...
</div>

For each person in the database, the php page populates a form sections.

To add additional people, the user can click on a "+" icon, at which time the page uses jQuery to dynamically populate a new . To do this I am simply appending the new div html to the existing form. This means that the javascript page contains all the same html markup (to be appended), as the php page.

This seems like an unnecessary duplication of code. Whenever I change something in the php page, I also have to change it in the javascript code.

Is there any general method for avoiding such code duplication? The only thing I can think of is to use jQuery to grab the html from an already existing div. But in this case, the values of the form fields for user n will appear in the new code for user n+1.

Thanks.

Solution

The php code should give the javascript a "prototype", which could be modified using javascript. That way, even if there aren't any users, the javascript would still work. This example is obviously missing lots of code (like forms), but it should give you an idea. I haven't tested it because I assume you have to make lots of modification anyways.

 <script type="application/x-javascript">
  addEventListener("load",function(){
   document.getElementById("add-user").addEventListener("click",function(){
    var node=document.getElementById("prototype-container").getElementsByClassName("users")[0].cloneNode(true),n=document.getElementById("add-user").getElementsByClassName("users").length,list=node.getElementsByTagName("input");
    document.getElementById("user-list").appendChild(node);
    node.id="users_"+(n+1);
    for(var i=0;i<list.length;++i)
     list[i].name&&(list[i].name+="["+n+"]");
   },false);
  },false);
 </script>
</head>
<body>
 <div id="prototype-container">
  <? /* print out a div without any information in it */ ?>
 </div>
 <div id="user-list">
  <? /* print out divs with some infomation in them */ ?>
 </div>
 <button id="add-user">add a user</button>