jquery - JavaScript add new row and populate new rows inputs with data from dropdown value -

I hope you can help me with the JavaScript problem, I'm staring at it for the day and I just do not understand it!

I have found a script that splits the price of an option's dropdown and populates some fields with filled values.

Then I got a 'Add Order Line' hyperlink to add a new row to the table, but I want to do the above facility on any new line but nothing happens

I have rebuilt it

  $ (window). Load (function () {var select EL = document.getElementById ('part_selection'); selectEl.onchange = function () {// var input1 = document.getElementsByName ('PART_NO'); var input2 = document.getElementById ('PART_DESCRIPTION '); Var input3 = document. GetElementById (' PART_PRICE '); var input4 = document.getElementById (' UNIT_MEAS '); var Valv = this.value; var parts = Val.split ("_"); / * input1 .value = parts [0]; * / input2.value = parts [1]; input 3. Value = parts [2]; input4.value = parts [3];}}); $ (Function () {var counter = 1; $ ('a.add-line'). ('Click', function () {counter ++; $ (this) .prev ('table.orderlinelist'). ('Tr') The last () clone () seems to be ('input') .val (''). End (). ('Input.ORDER_LINE_NO'). Val (counter) .end ( ). APPEND TO ('table.orderlinelist');});}); & Lt; Table class = "commandinist" & gt; & Lt; TR & gt; & Lt; TD & gt; Line & lt; / TD & gt; & Lt; TD & gt; Part & lt; / TD & gt; & Lt; Td> Part Details & lt; / Td> & Lt; Td> Unit Price & lt; / Td> & Lt; TD & gt; Quantity & lt; / TD & gt; & Lt; TD & gt; UoM & lt; / TD & gt; & Lt; Td> Line total & lt; / Td> & Lt; / TR & gt; & Lt; Tr & gt; & Lt; TD & gt; & Lt; Input type = "text" name = "ORDER_LINE_NO []" class = "ORDER_LINE_NO" id = "ORDER_LINE_NO" value = "1" read-only = "readable" /> & lt; / TD & gt; & Lt; TD & gt; & Lt; Select name = "PART_NO" id = "part_selection" & gt; & Lt; Option value = "" & gt; Choose a portion & lt; / Option & gt; & Lt; Option class = "dropdown1" value = "5461_Coxmoor sideboard_299.00_ EACH" & gt; 5461 & lt; / Option & gt; & Lt; / Select & gt; & Lt; / TD & gt; & Lt; TD & gt; & Lt; Input type = "text" name = "part_desc" id = "PART_DESCRIPTION" read-only / & gt; & Lt; / TD & gt; & Lt; TD & gt; & Lt; Input type = "text" name = "PART_PRICE []" id = "PART_PRICE" square = "commandpiece" /> & Lt; / TD & gt; & Lt; TD & gt; & Lt; Input type = "text" name = "qty []" id = "qty" class = "command prompt" /> & Lt; / TD & gt; & Lt; TD & gt; & Lt; Input type = "text" name = "UNIT_MEAS []" id = "UNIT_MEAS" class = "sequence" /> & lt; / TD & gt; & Lt; TD & gt; & Lt; Input type = "text" name = "TOTAL" id = "TOTAL" square = "commandpiece" /> & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt; & Lt; A href = "#" headline = "class =" add-line "& gt; Add line & lt; / A & gt;   
 Can you tell me in the right direction?  
 Cheers   
 
 
 These are the steps that you want to do  
 
 
 
 
 
 
 
 
 
 
 
 
  
  
  
  P>  The closest  to search the existing row Use  
 
 Then using the jQuery  Find , their  class  attributes.    
 And continue the rest of your code scenario.  
 
 I have taken these steps on your code such as:  
  $ (document) .on ("change", "table.orderlinelist .part_selection", function () {Var jrow = $ (this) .closest ('tr'); var input2 = jrow.find ('. PART_DESCRIPTION'); var input3 = jrow.find ('.pART_PRICE'); var input4 = jrow.find ('. UNIT_MEAS'); var Val = this.value; var parts = val .split ("_"); input 2.value (part [1]); input 3.val (part [2]); input 4 .v al (parts [3]);});   
 This is your job