javascript - Continue adding new items from the end of the created rows -

i'm trying restart adding data end of dynamically created list of drop downs.

scenario use add multiple lines errors using drop downs created using jquery function. these errors stored using error id in 1 column in table string looks 1,2,3,4 ... etc.

the functions add data working flawlessly. issue when try edit data.

to edit data use javascript fire post request pull data table below code i'm using data data tables.

html: create list

<div id="jtype-container" <?php if ($gettimedatarow["jtype"] == "qc"){?> style="display: block;" <?php } ?>>     <div id="error-add-container">       <div id="error-column-headings">            error number<span>error name</span>       </div>      <div class="error-column" id="errorarea">       <!-- code inserted using javascript retrieves data -->       <!-- database-->      </div>     </div>    </div> 

javascript: script called on load of file pull data table , set them selected items.

function geterror2(){     if (document.getelementbyid("utid").innerhtml !== "") {         var utid = document.getelementbyid("utid").innerhtml;     }else{         utid = null;     }      if(window.xmlhttprequest){          xmlhttp=new xmlhttprequest();      }else{          xmlhttp=new activexobject("microsoft.xmlhttp");      }xmlhttp.onreadystatechange=function(){         if(xmlhttp.readystate==4 && xmlhttp.status==200){              document.getelementbyid("errorarea").innerhtml = xmlhttp.responsetext;          }     };     if(utid === null){         alert("user time id not set, sure you're in right place." );     }else{         xmlhttp.open("post","../functions/getqcerrors.php?utid="+utid,true);         xmlhttp.send();     } } 

php:

   $getqcerrors = "select qcerrorid usertimetrack utid  = :utid";    $queryqcerrors = $dbconnect -> prepare($getqcerrors);    $queryqcerrors -> bindparam(':utid', $_request["utid"]);    $queryqcerrors -> execute();    $rowqcerror = $queryqcerrors -> fetch(pdo::fetch_assoc);    $errorno = 1;  if (!empty($rowqcerror["qcerrorid"])){        foreach (explode(',',$rowqcerror["qcerrorid"])as $id){           $getqcerrors = "select qcid,qcerror qcerrors qcid = :id order qcid asc";           $queryqcerrors = $dbconnect -> prepare($getqcerrors);           $queryqcerrors -> bindparam(':id', $id);           $queryqcerrors -> execute();        while ($rowerrors = $queryqcerrors -> fetch(pdo::fetch_assoc)){               echo "<div class='error-container'>";               echo "<input class='errorcount' size='1' value='".$errorno."' style='margin-left: 2%' />";               echo "<select id='errorname' class='errorname'>";               echo "<option id=".$rowerrors["qcid"].">".$rowerrors["qcerror"]."</option>";               echo "</select>";               echo "<input class='errorid' size='1' name='errorid' value='".$rowerrors["qcid"]."' hidden readonly>";               echo "<input type='button' class='addrow' value='add'/>";               echo "<input type='button' class='delrow' value='delete' />";               echo "</div>";               $errorno++;           }       }    }else{       echo "no data"; } 

in php user time entry id select correct errorid column table if column not empty run code explode data @ , bind variable $id in foreach loop correct error name qcerrors table.

the above php , javascript working. , drop downs getting created intended when try add new item clicking "add" button new drop down created @ top of list existing drop downs move down. no matter how many data there "add" button creates new item @ top.

jquery: function use create new item.

// add , remove function error text boxes $(document).ready(function() {    $(document).on('click', '.addrow', function() {      var selectedindex = $('.errorid').filter(':last').val();       if(selectedindex !== ""){        // $('.error-column .error-container:last').clone().appendto('.error-column');//clones row       // --- disabled due clones , resets value of drop down box          var $clone = $('.error-column .error-container:first').clone().appendto('.error-column');          $clone.find('.errorid').val('');//find errorid text box , makes value = ""          $clone.find('select.errorname').focus();//when cloned set focus error selector     $('.addrow').prop('disabled', true).filter(':last').prop('disabled', false);//add row , disables add buttons above     //reseterrorno();//reset values    geterror();//pulls errors db  }else{     alert("select error name");  } }).on('click', '.delrow', function() {     var $btn = $(this);      if (confirm('your sure want remove this?')) {          $btn.closest('.error-container').remove();//removes row           $('.addrow').prop('disabled', true).filter(':last').prop('disabled', false);//enables last add button           reseterrorno();//reset values    }   }).on('mouseover','.error-container',function () {     if($('#starttime').val()===""){        alert("set job start time");     }   }); }); 

i left delete in there well. , geterror() function used populating new drop down list.

i did try changing "add" part spot last item still adds top of list.

can 1 please show me need change in order add data end of list.

i solved problem self i'm answer.

the problem javascript used pull data new drop down. there condition applied skip 0 index, removed line line when creating new function. 1 causing issue.

so changed javascript this,

function geterror(){     //set drop down variable     var errorselect = document.getelementbyid("errorname");      if(window.xmlhttprequest){          xmlhttp=new xmlhttprequest();      }else{          xmlhttp=new activexobject("microsoft.xmlhttp");      }xmlhttp.onreadystatechange=function(){         if(xmlhttp.readystate==4 && xmlhttp.status==200){             if(errorselect.selectedindex === 0){                 errorselect.innerhtml = xmlhttp.responsetext;             }         }     };     xmlhttp.open("post","../functions/getqcerrors.php",true);     xmlhttp.send(); } 

then noticed 'add' button working , cloning cloning exact replica of 1 before selected value of drop down identical above 1 confused me had change that. archived changing 'add' function if condition takes effect if there's user time id number.

new add function:

$(document).ready(function() {     $(document).on('click', '.addrow', function() {         var selectedindex = $('.errorid').filter(':last').val();         if(selectedindex !== ""){             // $('.error-column .error-container:last').clone().appendto('.error-column');//clones row              // --- disabled due clones , resets value of drop down box             var $clone = $('.error-column .error-container:last').clone().appendto('.error-column');              $clone.find('.errorid').val('');//find errorid text box , makes value = ""             if($('#utid').text() !== ""){//change made here if                $clone.find('select.errorname').val("----- select error -----");             }             $clone.find('select.errorname').focus();//when cloned set focus error selector              $('.addrow').prop('disabled', true).filter(':last').prop('disabled', false);//add row , disables add buttons above             reseterrorno();//reset values             geterror();//pulls errors db          }else{             alert("select error name");         }     }).on('click', '.delrow', function() {         var $btn = $(this);         if (confirm('your sure want remove this?')) {             $btn.closest('.error-container').remove();//removes row             $('.addrow').prop('disabled', true).filter(':last').prop('disabled', false);//enables last add button             reseterrorno();//reset values         }     }).on('mouseover','.error-container',function () {         if($('#starttime').val()===""){             alert("set job start time");         }     }); }); 

then after saw there big problem drop downs not populated entire error list. correct error selected , set selected option. after staring @ monitor hours managed create php did wanted.

php code:

include_once("../iconnect/handshake.php"); if (!isset($_request["utid"])){     //this pull qc errors qcerror table.     $getqcerrors = "select qcid,qcerror qcerrors order qcid asc";     $queryqcerrors = $dbconnect -> query($getqcerrors);     $queryqcerrors -> execute();      echo "<option selected disabled>----- select error -----</option>";     while($rowqcerror = $queryqcerrors -> fetch(pdo::fetch_assoc)){         echo "<option id=".$rowqcerror["qcid"].">".$rowqcerror["qcerror"]."</option>";     } }else{     $getqcerrors = "select qcerrorid usertimetrack utid  = :utid";     $queryqcerrors = $dbconnect -> prepare($getqcerrors);     $queryqcerrors -> bindparam(':utid', $_request["utid"]);     $queryqcerrors -> execute();     $rowqcerror = $queryqcerrors -> fetch(pdo::fetch_assoc);      //initiation of error number counter     $errorno = 1;      //used determine last element of table , set last button enabled     $len_array = explode(',',$rowqcerror["qcerrorid"]);     $linecount = count($len_array);      if (!empty($rowqcerror["qcerrorid"])){         foreach (explode(',',$rowqcerror["qcerrorid"])as $id){             //pull matched data set table             $getqcerrors = "select qcid,qcerror qcerrors qcid = :id order qcid asc";             $queryqcerrors = $dbconnect -> prepare($getqcerrors);             $queryqcerrors -> bindparam(':id', $id);             $queryqcerrors -> execute();              //pulls entire data set table             $getqcerror = "select qcid,qcerror qcerrors order qcid asc";             $queryqcerror = $dbconnect -> query($getqcerror);             $queryqcerror -> execute();              while ($rowerrors = $queryqcerrors -> fetch(pdo::fetch_assoc)){                 echo "<div class='error-container'>";                 echo "<input class='errorcount' size='1' value='".$errorno."' style='margin-left: 2%' />";                 echo "<select id='errorname' class='errorname'>";                 echo "<option selected disabled>----- select error -----</option>";                 while($rowqcerror = $queryqcerror -> fetch(pdo::fetch_assoc)){                 //if condition in brackets mach id's both queries , set's selected option                     echo "<option id=".$rowqcerror["qcid"].' '.(($rowqcerror["qcid"] == $rowerrors["qcid"])?'selected':"").'>'.$rowqcerror["qcerror"]."</option>";                 }                 echo "</select>";                 echo "<input class='errorid' size='1' name='errorid' value='".$rowerrors["qcid"]."' hidden readonly>";                 if ($errorno == $linecount){                     echo "<input type='button' class='addrow' value='add'/>";                 }else{                     echo "<input type='button' class='addrow' value='add' disabled/>";                 }                 echo "<input type='button' class='delrow' value='delete' />";                 echo "</div>";                 $errorno++;             }         }     }else{         echo "no data";     } } 

this full code might not grate work, hope helps 1 in future

wiki