jQuery: How to make a new row of inputs only once after the change of an input element

Question

I kind of stumbled into an obstacle here. For a form I have the following inputs:

 <table> <tr> <td>Lening 1</td> <td> <input type="text" name="lening-Maatschappij" size="40" placeholder="Maatschappij"> </td> <td> <input type="text" name="lening-Restantschuld" size="40" placeholder="Restantschuld"> </td> </tr> <tr> <td> <input type="text" name="lening-Maandbedrag" size="40" placeholder="Maandbedrag"> </td> <td> <input type="text" name="lening-Jaarrente" size="40" placeholder="Jaarrente"> </td> <td> <select name="lening-inlossen" id="lening-inlossen"> <option disabled="">Inlossen</option> <option value="Ja">Ja</option> <option value="Nee">Nee</option> </select> </td> </tr> </table> 

What I want to do is make sure that if one of these input fields loses focus (I assume focusOut will work here), but contains text, these rows are created again, but with Lening 2 as the first label. So it should end up like this:

 <table> <tr> <td>Lening 1</td> <td> <input type="text" name="lening-Maatschappij" size="40" placeholder="Maatschappij"> </td> <td> <input type="text" name="lening-Restantschuld" size="40" placeholder="Restantschuld"> </td> </tr> <tr> <td> <input type="text" name="lening-Maandbedrag" size="40" placeholder="Maandbedrag"> </td> <td> <input type="text" name="lening-Jaarrente" size="40" placeholder="Jaarrente"> </td> <td> <select name="lening-inlossen" id="lening-inlossen"> <option disabled="">Inlossen</option> <option value="Ja">Ja</option> <option value="Nee">Nee</option> </select> </td> </tr> <tr> <td>Lening 2</td> <td> <input type="text" name="lening-Maatschappij" size="40" placeholder="Maatschappij"> </td> <td> <input type="text" name="lening-Restantschuld" size="40" placeholder="Restantschuld"> </td> </tr> <tr> <td> <input type="text" name="lening-Maandbedrag" size="40" placeholder="Maandbedrag"> </td> <td> <input type="text" name="lening-Jaarrente" size="40" placeholder="Jaarrente"> </td> <td> <select name="lening-inlossen" id="lening-inlossen"> <option disabled="">Inlossen</option> <option value="Ja">Ja</option> <option value="Nee">Nee</option> </select> </td> </tr> </table> 

I just need to make sure that if I focus on the rows from Lening 1 I don't end up having a third row made, cause my focusOut event will be called again.

The question is: How can I make sure Lening 2 is only generated once when I type in the input fields of Lening 1 , and how can I make sure that Lening 3 is generated once when I type in the input fields of Lening 2 and so on?

I hope I formatted my question correctly. It's had to summarize this into one sentence. I'm really not only asking this question, but also asking how to ask (Even after reading the how-to on asking I'm not sure if I'm doing this right)

Answer 1

Focusout() will be called repetitively.

You can do one thing when user starts typing into first row's first text box, the you can generate the row 2nd, when user starts typing into second rows first text box, row 3rd will appear and so on.

You need onkeyup event for that.

$("#lening-Maatschappij_1").keyup(function(){
    // generated the row Lening 2
});
$("#lening-Maatschappij_2").keyup(function(){
    // generated the row Lening 3
});