Using meteor js to change the text dynamically

问题

Please check the image for reference

The editable div is added using tags and text. Text is inputted by the user. The tags are selected from the two boxes above them.

When the data in the tags is changed then the tags selection list data is also changed accordingly.

But the data in the content-editable div remains same. I need it to also change accordingly or notify missing when deleted.

I am using Meteor JS and Blaze , React for this . I took some reference from this fiddle link

 "click .selectable-tags"(e, t) {
      // sets the tags inside the Method  box on click 
   let el = e.target.cloneNode(true);
   el.setAttribute('contenteditable', false);
   document.querySelector('[contenteditable]').appendChild(el);
  },

 <div class="recipe_create_form_input_lable">Ing</div>
          <div class="ingredients-list">
            {{#each ing}}
            <div class="ingredients-div" id="ing_parent_{{@index}}">
<div class="ing-list-box-left">
                <input type="text" value="{{this}}" placeholder="Ing " class="ree-create-text_box_rectangle ingredient_input"  id="ing_{{@index}}"> <span class="timeLable"></span>
              </div>
              <div class="ings-list-box-right">
                <button type="button" class="btn btn-default delete-ing-btn" style="margin-left : 5px;">
                  <!-- <img src="/images/remove-copy-2.svg" style="width:30px;"/> -->
                  <label style="width:30px;height: 18px;">x</label>
                </button>
              </div>
            </div>
            {{/each}}
          </div>
          
          {{#each stepList}}
          <div class="step-div" id="step_{{@index}}">
            <div class="step-list-box-left">
              <div class="rec_create_form_input_lable stepLabel">Step {{getStepNo(@index)}}</div>
              <div value="{{this}}" id="step_input_{{@index}}" name="step"  class="rec-create-text_box_rectangle stepbox step_input" contenteditable="true"></div>
            </div>
            <div class="step-list-box-right">
              <button type="button" class="btn btn-default delete-step-btn" style="margin-left : 5px;">
              
                <label style="width:30px;height: 18px;">x</label>
              </button>
            </div>
          </div>
          <div class="showbiz">   
            <div class="custom-input">
                 <div class="selectable-tags">
                    {{#each ing }}
              <span style="  background: #E1ECF4;border: 1px dotted #39739d;" class="ingredients-tags"> {{this}} </span>
                     {{/each}}
                  </div>  </div>
          </div>
          {{/each}}
          <div>

来源：https://stackoverflow.com/questions/45693521/using-meteor-js-to-change-the-text-dynamically