var latestId = 0;

function addNewItem() {
  var js_select = document.getElementById ("id_req_feats_select");
  
  appendElement("id_req_feats_container", 
                "element" + latestId, 
                "<input type=\"hidden\" name=\"id_required_feat\ value=\"" 
                  + js_select.options[js_select.selectedIndex].value + "\"/>" 
                  + js_select.options[js_select.selectedIndex].text 
                  + " <input type=\"button\" onClick=\"javascript:removeItem(" + latestId + ")\" value=\"Remove\"/>");
  
  latestId++;
}
function add_js_item(container_id, select_id, hidden_name) {
  var js_select = document.getElementById (select_id);
  
  appendElement(container_id, 
                "id_dyn_element" + latestId, 
                "<div class=\"sub1\"><input type=\"hidden\" name=\"" + hidden_name + "[]\" value=\""
                  + js_select.options[js_select.selectedIndex].value + "\"/>" 
                  + js_select.options[js_select.selectedIndex].text 
                  + "</div><div class=\"sub2\"><input type=\"button\" onClick=\"javascript:remove_js_item('" + container_id + "', " + latestId + ")\" value=\"Remove\"/></div><div class=\"clear\">&nbsp;</div>");
  
  latestId++;
}
function add_js_triplet (container_id, select_id, hidden_name, res_1, res_2) {
  var js_var_1;
  var js_var_2;
  var js_select = document.getElementById (select_id);
  if (document.getElementById(res_1)) js_var_1 = document.getElementById(res_1).value;
  if (document.getElementById(res_2)) js_var_2 = document.getElementById(res_2).value;
  
  appendElement(container_id, 
                "id_dyn_element" + latestId, 
                "<div class=\"sub1\"><input type=\"hidden\" name=\"" + hidden_name + "[" + latestId + "][0]\" value=\"" + js_select.options[js_select.selectedIndex].value + "\"/>" 
                  + "<input type=\"hidden\" name=\"" + hidden_name + "[" + latestId + "][1]\" value=\"" + js_var_1 + "\"/>" 
                  + "<input type=\"hidden\" name=\"" + hidden_name + "[" + latestId + "][2]\" value=\"" + js_var_2 + "\"/>" 
                  + js_select.options[js_select.selectedIndex].text + " (" + js_var_1 + (js_var_2 ? ", " + js_var_2 : "") + ")"  
                  + "</div><div class=\"sub2\"><input type=\"button\" onClick=\"javascript:remove_js_item('" + container_id + "', " + latestId + ")\" value=\"Remove\"/></div><div class=\"clear\">&nbsp;</div>");
  
  latestId++;
  
}
function add_js_doublet (container_id, select_id, hidden_name, res_1) {
  var js_var_1;
  var js_select = document.getElementById (select_id);
  js_var_1 = document.getElementById(res_1).value;
  
  appendElement(container_id, 
                "id_dyn_element" + latestId, 
                "<div class=\"sub1\"><input type=\"hidden\" name=\"" + hidden_name + "[" + latestId + "][0]\" value=\"" + js_select.options[js_select.selectedIndex].value + "\"/>" 
                  + "<input type=\"hidden\" name=\"" + hidden_name + "[" + latestId + "][1]\" value=\"" + js_var_1 + "\"/>" 
                  + js_select.options[js_select.selectedIndex].text + " (" + js_var_1 + ")"  
                  + "</div><div class=\"sub2\"><input type=\"button\" onClick=\"javascript:remove_js_item('" + container_id + "', " + latestId + ")\" value=\"Remove\"/></div><div class=\"clear\">&nbsp;</div>");
  
  latestId++;
  
}
function add_js_text (container_id, hidden_name, res_1) {
  var js_var_1 = document.getElementById(res_1).value;
  
  appendElement(container_id, 
                "id_dyn_element" + latestId, 
                "<div class=\"sub1\"><input type=\"hidden\" name=\"" + hidden_name + "[]\" value=\"" + js_var_1 + "\"/>" 
                  + js_var_1 
                  + "</div><div class=\"sub2\"><input type=\"button\" onClick=\"javascript:remove_js_item('" + container_id + "', " + latestId + ")\" value=\"Remove\"/></div><div class=\"clear\">&nbsp;</div>");
  
  latestId++;
  
}
function remove_js_item(container_id, idNumber) {
  
  removeElement(container_id, "id_dyn_element" + idNumber);
}

function removeElement(parentId, elementId) {
  
  //Get a reference to the element containgint the element we are removing
  var parentElement = document.getElementById(parentId);
  //Get a reference to the element we are removing
  var childElement = document.getElementById(elementId);
  
  //remove the 
  parentElement.removeChild(childElement);
}

function appendElement(containerId, newElementId, newElementContent) {
  
  //First, we need to create a new DIV element
  var newElement=document.createElement("div");
  //New we will give it the specified ID so we can manage it later if necessary
  newElement.setAttribute("id", newElementId);
  newElement.setAttribute("style", "margin: 1px;");
  //Insert the HTML content into the new element
  newElement.innerHTML=newElementContent;
  
  //Get a reference to the element that will contain the new element
  var container = document.getElementById(containerId);
  //Now we just need to insert our new element into the containing element
  container.appendChild(newElement, container);
  
}