able to load scripts but cannot get them to go to the right place

Work in progress

rowers/templates/flexthumbnails.html

@@ -1,17 +1,10 @@
-{% if charts %}
+
+
 <h2>Flex Charts</h2>
 <p>Click on the thumbnails to view the full chart.</p>
-{% for chart in charts %}
-    <div class="grid_3 alpha">
-      <big>{{ forloop.counter }}</big>
-      <div class="grid_3 tooltip">
-        <a href="/rowers/workout/{{ workout.id }}/flexchart?favoritechart={{ forloop.counter |add:"-1" }}">
-          {{ chart.div | safe }}
-        </a>
-        {% if rower.showfavoritechartnotes %}
-        <span class="tooltiptext">{{ chart.notes }}</span>
-        {% endif %}
-      </div>
-    </div>
-    {% endfor %}
-{% endif %}
+<div id="id_thumbscripts">
+
+</div>
+<div id="id_thumbs">
+
+</div>

rowers/templates/workflow.html

@@ -25,6 +25,20 @@
 
 {% block scripts %}
 {% include "monitorjobs.html" %}
+<script>
+  $(function($) {
+  console.log('loading script');
+  $.getJSON(window.location.protocol + '//'+window.location.host + '/rowers/workout/{{ workout.id }}/get-testscript', function(json) {
+  console.log('script loaded');
+  $.each(json, function(index, element) {
+  console.log('adding thumbnail');
+  $("#id_thumbs").append(element.div);
+  $("#id_thumbscripts").append(element.script);
+  });
+  });
+  });
+</script>
+
 {% endblock %}
 
 

rowers/templates/workflow_snippet.html

@@ -0,0 +1,14 @@
+{% for chart in charts %}
+    <div class="grid_3 alpha">
+      <big>{{ forloop.counter }}</big>
+      <div class="grid_3 tooltip">
+        <a href="/rowers/workout/{{ workout.id }}/flexchart?favoritechart={{ forloop.counter |add:"-1" }}">
+          {{ chart.div | safe }}
+        </a>
+        {% if rower.showfavoritechartnotes %}
+        <span class="tooltiptext">{{ chart.notes }}</span>
+        {% endif %}
+      </div>
+    </div>
+    {% endfor %}
+{% endif %}