Локализация области действия скрипта Mathjax

В разрабатываемом приложении, которое позволяет студентам интерактивно решать задачи по линейной алгебре, студент вводит части своего решения (формулы) с помощью специального элемента управления, который для краткости называется шагом студента. Для студентов предусмотрено два вида интерфейса ввода шагов: "легкий" и "трудный". В легком интерфейсе студенту предоставляется шаблон("скелет") формулы, который он может заполнять математическими символами с помощью drag-and-drop.

Дмитрием был разработан тестовый пример, в котором на странице располагалось текстовое представление шаблона формулы (на рис - 1), математические символы, которые можно тащить и бросать в шаблон (2), сам шаблон, сгенерированный на основе текстового представления (3), и динамически генерирующееся скриптом Mathjax представление измененного шаблона (4).

А вот как выглядел этот пример при частично заполненной формуле:

Далее выяснилось, что если на html-странице расположено несколько шаблонов формул (а они в разрабатываемом приложении все заполняются математическими символами из одной и той же таблицы), то при заполнении очередного шаблона "гадится" генерирующееся mathjax'ом представление других шаблонов.

В тестовом примере обращение к элементам на странице шло по классу CSS. Например:

$(".formula_input_field").droppable({
            accept: ".math_toolbox_element",
            drop: function(event,ui){
                            console.log("Item was Dropped");
                           
                            // 1. Впишем изменения в текстовое представление 
                            // формулы в TeX формате в переменной formula_template
                            tex_value = $(ui.draggable).data('tex');
                            input_name_to_replace = $(this).attr('name');
                            formula_template = formula_template
                                 .replace("["+ input_name_to_replace +"]", tex_value);
                           
                            
                            
                            // 1.1. Попросим mathjax перерисовать формулу для этого выражения
                            // http://www.mathjax.org/docs/1.1/typeset.html
                            var math = MathJax.Hub.getAllJax($('.formula_text_latex')[0])[0];
       MathJax.Hub.Queue(["Text", math, formula_template]);
                            
                            
                            // 2. Заменим поле ввода на перетаскиваемый (draggable) символ
                            $(this).replaceWith($(ui.draggable).clone());
                            
                           
                    }
     });

Для решения этой проблемы создала тестовый пример с двумя шаблонами для заполнения. 

Всем значимым элементам html дала id, при этом id назначала так:
<p>Поле, куда перемещаются элементы:</p>
 <!--<div class="formula_display"></div>-->
 <div class="formula_display" id="disp1"></div>
 <div class="formula_display" id="disp2"></div>
 
 <p>Генерящееся mathjax-ом представление измененного шаблона:</p>
 <!--<div class="formula_text_latex"></div>-->
 <div class="formula_text_latex" id="tex1"></div>
 <div class="formula_text_latex" id="tex2"></div>


То есть, у одинаковых по функциональному назначению элементов id отличались только номерами в конце.
Функцию, которая обрабатывает бросание математического символа на шаблон формулы, изменила так:
  $(".formula_input_field").droppable({
            accept: ".math_toolbox_element",
            drop: function(event,ui){
                            console.log("Item was Dropped");
       
       //находим id 
       //http://stackoverflow.com/questions/2454308/how-to-find-the-parent-element-using-javascript
       var exp_id = $(this).parent().attr('id');
       var num = exp_id.substring(4, exp_id.length);
                           
                            // 1. Впишем изменения в текстовое представление 
                            // формулы в TeX формате в переменной formula_template
                            tex_value = $(ui.draggable).data('tex');
                            input_name_to_replace = $(this).attr('name');
       formula_template[num-1] = formula_template[num-1]
                                 .replace("["+ input_name_to_replace +"]", tex_value);
                            
                            
                            // 1.1. Попросим mathjax перерисовать формулу для этого выражения
                            var math = MathJax.Hub.getAllJax($('#tex'+num)[0])[0];
                            MathJax.Hub.Queue(["Text", math, formula_template[num-1]]);       
                            
                            // 2. Заменим поле ввода на перетаскиваемый (draggable) символ
                            $(this).replaceWith($(ui.draggable).clone());
                            
                           
                    }
     });

То есть, алгоритм был такой: получаем идентификатор шаблона, куда сброшен математический символ. 

Из него получаем номер шаблона (1 или 2), далее формируем идентификатор визуального представления, которое должно обновиться и просим Mathjax обновить только одинhtml  элемент -- с этим идентификатором.

В процессе решения этой проблемы помогла страница, которую порекомендовал Дмитрий.