jquery - Load Textarea text into input boxes -

for website, users can provide list of tracks. far works, wish feature textarea textbox function

so people copy paste textfile textarea, convert button reads text , places proper artist/track in inputbox

so if user puts in:

artist1 - track1 artist2 - track2 artist3 - track3 artist4 - track4 

the jquery code should place these input boxes artist , track separated.

how can achieve this?

thanks in advance!

this job. no need convert button. listen input event:

$('textarea').on('input', function() {    var sp= this.value.split(/[\r\n]/);    sp.foreach(function(value, i) {      var sp= value.split(/ *- */);      $('.artists tr').eq(i).find('input').eq(0).val(sp[0]);      $('.artists tr').eq(i).find('input').eq(1).val(sp[1]);    });  });

textarea {    width: 90%;    height: 6em;  }    .artists td:nth-child(1):before {    content: 'artist';    display: block;    font: 9px verdana;    color: brown;  }    .artists td:nth-child(2):before {    content: 'track';    display: block;    font: 9px verdana;    color: brown;  }    input {    width: 20em;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <textarea></textarea>    <table class="artists">    <tr><td><input type="text"></td><td><input type="text"></td>    <tr><td><input type="text"></td><td><input type="text"></td>    <tr><td><input type="text"></td><td><input type="text"></td>    <tr><td><input type="text"></td><td><input type="text"></td>    <tr><td><input type="text"></td><td><input type="text"></td>    <tr><td><input type="text"></td><td><input type="text"></td>    <tr><td><input type="text"></td><td><input type="text"></td>    <tr><td><input type="text"></td><td><input type="text"></td>    <tr><td><input type="text"></td><td><input type="text"></td>    <tr><td><input type="text"></td><td><input type="text"></td>  </table>