javascript - Append textarea new line text as anchor text -

weave = http://kodeweave.sourceforge.net/editor/#4c11169c009d3096f896798b8b28e088

i have textarea.libraries consists of following value (this changes depending on user input).

https://necolas.github.io/normalize.css/4.1.1/normalize.css https://leaverou.github.io/prefixfree/prefixfree.js http://ajax.googleapis.com/ajax/libs/mootools/1/mootools-yui-compressed.js https://cdnjs.cloudflare.com/ajax/libs/chart.js/1.0.2/chart.js 

i know can detect number of lines textarea has using simple loop...

for (i = 0; <= $(".libraries").val().split("\n").length - 1; += 1) {   // every new line appends anchor   $(".assets").append('<a class="block" href="javascript:void(0)">'+ +'</a>') } 

in case...
when anchors appended how can grab first line being normalize link first anchors text, prefix-free second, , on?

if you're still confused. i'm trying take value...

https://necolas.github.io/normalize.css/4.1.1/normalize.css https://leaverou.github.io/prefixfree/prefixfree.js http://ajax.googleapis.com/ajax/libs/mootools/1/mootools-yui-compressed.js https://cdnjs.cloudflare.com/ajax/libs/chart.js/1.0.2/chart.js 

and turn into...

<a data-action="call1">https://necolas.github.io/normalize.css/4.1.1/normalize.css</a> <a data-action="call2">https://leaverou.github.io/prefixfree/prefixfree.js</a> <a data-action="call3">http://ajax.googleapis.com/ajax/libs/mootools/1/mootools-yui-compressed.js</a> <a data-action="call4">https://cdnjs.cloudflare.com/ajax/libs/chart.js/1.0.2/chart.js</a> 

any appreciated.

var download_to_textbox = function (url, el) {        return $.get(url, null, function (data) {          el.val(data)        }, "text")      };    // library index upon anchor click  var libraryindex = function() {    $(".assets a").on("click", function() {      alert($(this).index() + 1)    })  };    $(".libraries").on("keyup change", function() {    $(".assets").empty()    (i = 1; <= $(".libraries").val().split("\n").length; += 1) {      $(".assets").append('<a class="block" href="javascript:void(0)">'+ +'</a>')    }    settimeout(function() {      libraryindex()    }, 300)  }).trigger("change")

.wrapper, .assets, .bottom {    position: absolute;  }    .wrapper {    top: 0;    left: 0;    right: 0;    bottom: 0;    font-size: 12px;  }    .assets textarea {    width: 98%;    height: 58px;  }    .assets {    top: 0;    bottom: 70px;    overflow: auto;  }    .assets {    font-size: 17px;    padding: 7px;  }    .bottom {    bottom: 0;  }    .bottom textarea {    height: 60px;    padding: 0;    padding-top: 3px;    border: 0;    border-top: 1px solid #666;  }    /* variable classe */  .block {    display: block;  }  .fill {    width: 100%;  }  .hide {    display: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <div class="wrapper">    <div class="assets fill">      <!-- <textarea class="example"></textarea> -->    </div>      <div class="bottom fill">      <textarea class="libraries fill">https://necolas.github.io/normalize.css/4.1.1/normalize.css  https://leaverou.github.io/prefixfree/prefixfree.js  http://ajax.googleapis.com/ajax/libs/mootools/1/mootools-yui-compressed.js  https://cdnjs.cloudflare.com/ajax/libs/chart.js/1.0.2/chart.js</textarea>    </div>  </div>

i think need this, said in comments hard understand. however, here modified snippet:

edited

i'm make edition due new comment expected result. here are:

var download_to_textbox = function (url, el) {        return $.get(url, null, function (data) {          el.val(data)        }, "text")      };    // library index upon anchor click  var libraryindex = function() {    $(".assets a").on("click", function() {      alert($(this).index() + 1)    })  };    $(".libraries").on("keyup change", function() {    $(".assets").empty()    var lines = $(".libraries").val().split("\n");    (i = 0; < lines.length; ++) {      $(".assets").append('<a data-action="call'+(i+1)+'">'+ lines[i] +'</a>')    }    settimeout(function() {      libraryindex()    }, 300)  }).trigger("change")

.wrapper, .assets, .bottom {    position: absolute;  }    .wrapper {    top: 0;    left: 0;    right: 0;    bottom: 0;    font-size: 12px;  }    .assets textarea {    width: 98%;    height: 58px;  }    .assets {    top: 0;    bottom: 70px;    overflow: auto;  }    .assets {    font-size: 17px;    padding: 7px;    display:block;  }    .bottom {    bottom: 0;  }    .bottom textarea {    height: 60px;    padding: 0;    padding-top: 3px;    border: 0;    border-top: 1px solid #666;  }    /* variable classe */  .block {    display: block;  }  .fill {    width: 100%;  }  .hide {    display: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <div class="wrapper">    <div class="assets fill">      <!-- <textarea class="example"></textarea> -->    </div>      <div class="bottom fill">      <textarea class="libraries fill">https://necolas.github.io/normalize.css/4.1.1/normalize.css  https://leaverou.github.io/prefixfree/prefixfree.js  http://ajax.googleapis.com/ajax/libs/mootools/1/mootools-yui-compressed.js  https://cdnjs.cloudflare.com/ajax/libs/chart.js/1.0.2/chart.js</textarea>    </div>  </div>