Using document.currentScript to append data to divs

Question

I want to append data into divs by passing their id as attributes in a script tag. In this example the first-div should get get 'test1' appended to it, and the second-div should get the 'test2' appended to it.

However, the result it that both 'test1' and 'test2' are appended to second-div. first-div is empty. I'm guessing it has to do with how document.currentScript is functioning. Is there any way to get the result I am looking for?

<div id="first-div"></div>
<div id="second-div"></div>

<script attr1="name1" attr2="name2" to-div="first-div" type="text/javascript">
  var this_script = document.currentScript;
  var attr1 = this_script.getAttribute('attr1');
  var attr2 = this_script.getAttribute('attr2');
  var append_div = this_script.getAttribute('to-div');

  $.ajax({
    url: "/dir?attr1=" + attr1,
    type: 'GET',
    success: function(data) {
      $('#' + append_div).append("test1");
  });
</script>

<script attr1="name3" attr2="name4" to-div="second-div" type="text/javascript">
  var this_script = document.currentScript;
  var attr1 = this_script.getAttribute('attr1');
  var attr2 = this_script.getAttribute('attr2');
  var append_div = this_script.getAttribute('to-div');

  $.ajax({
    url: "/dir?attr1=" + attr1,
    type: 'GET',
    success: function(data) {
      $('#' + append_div).append("test2");
  });
</script>

Also, in the solution, the scripts cannot have id attributes, which is why I am trying to use document.currentScript.

The reason for this is that the code will be hosted on my servers. The code will append information into the divs the user wants, given parameters passed through attributes on the script tag. In the end the user should be able to use:

<script attr1="var1" attr2="var2" to-div="custom-div" src="http://www.myurl.com/assets/script.js" type="text/javascript"></script>

To insert data into their custom-div based on code I run on my servers dependend on the parameters attr1 and attr2 they provide.

Answer 1

Your problem is that var append_div is a global variable and each time a new script tag is encountered it gets overwritten with the new value.

Since ajax is asynchronous , by the time the responses return the other script tags will have been evaluated so append_div will have the value of the last script tag.

You could fix this by creating a function that wraps the ajax

function doAjax(elementId, attr1) {
    $.ajax({
        url: "/dir?attr1=" + attr1,
        type: 'GET',
        success: function (data) {
            $('#' + elementId).append("test2");
        }
    });
}

doAjax(append_div, attr1); 

An even better solution as pointed out by @Rhumborl is to use an IIFE

(function( elementId, attr1){
    $.ajax({
        url: "/dir?attr1=" + attr1,
        type: 'GET',
        success: function (data) {
            $('#' + elementId).append("test2");
        }
    });
}(elementId, attr1);

Or wrap all of your code in an IIFE and no arguments would need to be passed in.

(function(){
      var this_script = document.currentScript;
      var attr1 = this_script.getAttribute('attr1');
      var attr2 = this_script.getAttribute('attr2');
      var append_div = this_script.getAttribute('to-div');

      $.ajax({
        url: "/dir?attr1=" + attr1,
        type: 'GET',
        success: function(data) {
          $('#' + append_div).append("test2");
        }
      });
}();