Add/Remove values from checkbox

Question

So I check normalize to add normalize library...

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />

I check jQuery and I add the jQuery source after normalize...

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

but if I uncheck normalize, I want it to remove the normalize link, and if I check it again I want to add normalize after jQuery...

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />

That's what's suppose to happen but instead when I add say AngularJS, and then normalize, it's suppose to show like this...

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />

but instead I get....

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />

So basically what I check I want that library to add after the other libraries I check.

My jQuery is...

// Add/Remove Library from Checkbox
$(".check").on("change", function() {

  // Join All Checked Libraries
  $(".full-library-code").val(function() {
    return $.map($(".check:checked").next().next(), function (el) {
      return el.value;
    }).join('\n');
  });
});

I believe this can happen without Codemirror, and I believe this problem is happening because of how I have my html structured with my jQuery, but I have no idea how to solve it.

$(document).ready(function() {
  // Add/Remove Library from Checkbox
  $(".check").on("change", function() {

    // Join All Checked Libraries
    $(".full-library-code").val(function() {
      return $.map($(".check:checked").next().next(), function (el) {
        return el.value;
      }).join('\n');
    });
  });
});

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<input type="checkbox" class="check" id="norm"> <label for="norm">Normalize</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />' /><br>
<input type="checkbox" class="check" id="jquery"> <label for="jquery">JQuery</label>
<input type="text" class="hide" value='<script src="http://code.jquery.com/jquery-latest.min.js"></script>' /><br>
<input type="checkbox" class="check" id="ang"> <label for="ang">Angular JS</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />' /><br>
<textarea class="full-library-code" placeholder="full library's code"></textarea>

Answer 1

What I understand from your question is that you want the later checked libraries to appear later in the textarea. Here is how you can do that

$(".check").on("change", function() {
  var $textArea = $(".full-library-code");
  var fullLibraryCode = $textArea.val();
  var thisValue = $(this).next().next().val() + "\n";

  if (this.checked) {
    $textArea.val(fullLibraryCode + thisValue);
  } else {
    $textArea.val(fullLibraryCode.replace(thisValue, ""));
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check" id="norm">
<label for="norm">Normalize</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />' />
<br>
<input type="checkbox" class="check" id="jquery">
<label for="jquery">JQuery</label>
<input type="text" class="hide" value='<script src="http://code.jquery.com/jquery-latest.min.js"></script>' />
<br>
<input type="checkbox" class="check" id="ang">
<label for="ang">Angular JS</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />' />
<br>
<textarea class="full-library-code" placeholder="full library's code"></textarea>

Answer 2

Instead of looping all the checkboxes every time you should look if the clicked checkbox is 'checked' or 'unchecked'. Based on that, add or remove the text.

$(document).ready(function() {
    $(".check").on("change", function() {
        var textarea = $('.full-library-code');
        var value = $(this).nextAll('input:first').val() + '\n';
        
        if( $(this).prop('checked') == true )
            textarea.val( textarea.val() + value );
        else
            textarea.val( textarea.val().replace( value, "") );
    });
});

/* only for demo readability */
textarea { width: 500px; height: 200px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check" id="norm" /> <label for="norm">Normalize</label>
<input type="text" class="hide" value='&lt;link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" /&gt;' /><br />
<input type="checkbox" class="check" id="jquery" /> <label for="jquery">JQuery</label>
<input type="text" class="hide" value='&lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;' /><br />
<input type="checkbox" class="check" id="ang" /> <label for="ang">Angular JS</label>
<input type="text" class="hide" value='&lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" /&gt;' /><br />
<textarea class="full-library-code" placeholder="full library's code"></textarea>

Note: please mind A. Wolff's comment, you probably want to add AngularJS as a script... also, in the values I replaced the < and > for < and >

Answer 3

If you're getting the element in reverse order, simply use the reverse() method before the join(), like so:

// Join All Checked Libraries
$(".full-library-code").val(function() {
  return $.map($(".check:checked").next().next(), function (el) {
     return el.value;
  }).reverse().join('\n');
});