grapes js version v0.16.34 giving unexpected script code after loading saved html

attaching code:
while saving the html:

<div class="gjs-row">
  <div class="gjs-cell">
    <div class="gjs-row">
      <div class="gjs-cell">
        <div id="i6x6">
          <div id="bsrne9exd5" style="height:300px"  tg="DataGrid" tagName="DataGrid" class="ag-theme-alpine">
          </div>
        </div>
      </div>
      <div class="gjs-cell">
        <div id="ibc4">
          <div id="3drqn6v2q5" style="height:300px"  tg="DataGrid" tagName="DataGrid" class="ag-theme-alpine">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>var items = document.querySelectorAll('#i6x6');
  for (var i = 0, len = items.length; i < len; i++) {
    (function(){
      var columnDefs = [{
        headerName: 'Make', field: 'make',sortable: true, filter: true}
                        , {
                          headerName: 'Model', field: 'model',sortable: true, filter: true}
                        ,{
                          headerName: 'Price', field: 'price',sortable: true, filter: true}
                       ];
      var rowData = [{
        make: 'Toyota', model: 'Celica', price: 35000}
                     ,{
                       make: 'Ford', model: 'Mondeo', price: 32000}
                     ,{
                       make: 'Porsche', model: 'Boxter', price: 72000}
                    ];
      var gridOptions = {
        defaultColDef: {
          resizable: true }
        ,columnDefs: columnDefs,rowData: rowData};
      var gridDiv = document.getElementById('bsrne9exd5');
      new agGrid.Grid(gridDiv, gridOptions);
    }
     .bind(items[i]))();
  }
  var items = document.querySelectorAll('#ibc4');
  for (var i = 0, len = items.length; i < len; i++) {
    (function(){
      var columnDefs = [{
        headerName: 'Make', field: 'make',sortable: true, filter: true}
                        , {
                          headerName: 'Model', field: 'model',sortable: true, filter: true}
                        ,{
                          headerName: 'Price', field: 'price',sortable: true, filter: true}
                       ];
      var rowData = [{
        make: 'Toyota', model: 'Celica', price: 35000}
                     ,{
                       make: 'Ford', model: 'Mondeo', price: 32000}
                     ,{
                       make: 'Porsche', model: 'Boxter', price: 72000}
                    ];
      var gridOptions = {
        defaultColDef: {
          resizable: true }
        ,columnDefs: columnDefs,rowData: rowData};
      var gridDiv = document.getElementById('3drqn6v2q5');
      new agGrid.Grid(gridDiv, gridOptions);
    }
     .bind(items[i]))();
  }
</script>



after saving the code become:

<div class="gjs-row">
  <div class="gjs-cell">
    <div class="gjs-row">
      <div class="gjs-cell">
        <div id="iepv">
          <div id="4h942l66s5" tg="DataGrid" tagname="DataGrid" class="ag-theme-alpine">
          </div>
        </div>
      </div>
      <div class="gjs-cell">
        <div id="iiih">
          <div id="l6r4s71nr5" tg="DataGrid" tagname="DataGrid" class="ag-theme-alpine">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="loader" class="loader text-center d-none">
  <div id="ie5kf" class="spinner-border text-primary">
  </div> 
  <div id="iqy34">Processing.........
  </div>
</div>
<input type="hidden" id="solutionName" name="solutionName" value="finalTest"/>
<input type="hidden" id="templateId" name="templateId" value="29742b00-897b-4f4e-9a58-4c8c63b9a8d8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>
<script src="/utils.js"></script>
<script id="script_initial">$(document).ready(function(event){
    utils.initialize()}
                                             );
</script>
<script>var items = document.querySelectorAll(&#039;#iepv&#039;);
  for (var i = 0, len = items.length; i &lt; len; i++) {
    (function(){
      var columnDefs = [{
        headerName: &#039;
        Make&#039;
        , field: &#039;
        make&#039;
        ,sortable: true, filter: true}
                        , {
                          headerName: &#039;
                          Model&#039;
                          , field: &#039;
                          model&#039;
                          ,sortable: true, filter: true}
                        ,{
                          headerName: &#039;
                          Price&#039;
                          , field: &#039;
                          price&#039;
                          ,sortable: true, filter: true}
                       ];
      var rowData = [{
        make: &#039;
        Toyota&#039;
        , model: &#039;
        Celica&#039;
        , price: 35000}
                     ,{
                       make: &#039;
                       Ford&#039;
                       , model: &#039;
                       Mondeo&#039;
                       , price: 32000}
                     ,{
                       make: &#039;
                       Porsche&#039;
                       , model: &#039;
                       Boxter&#039;
                       , price: 72000}
                    ];
      var gridOptions = {
        defaultColDef: {
          resizable: true }
        ,columnDefs: columnDefs,rowData: rowData};
      var gridDiv = document.getElementById(&#039;4h942l66s5&#039;);
      new agGrid.Grid(gridDiv, gridOptions);
    }
     .bind(items[i]))();
  }
  var items = document.querySelectorAll(&#039;#iiih&#039;);
  for (var i = 0, len = items.length; i &lt; len; i++) {
    (function(){
      var columnDefs = [{
        headerName: &#039;
        Make&#039;
        , field: &#039;
        make&#039;
        ,sortable: true, filter: true}
                        , {
                          headerName: &#039;
                          Model&#039;
                          , field: &#039;
                          model&#039;
                          ,sortable: true, filter: true}
                        ,{
                          headerName: &#039;
                          Price&#039;
                          , field: &#039;
                          price&#039;
                          ,sortable: true, filter: true}
                       ];
      var rowData = [{
        make: &#039;
        Toyota&#039;
        , model: &#039;
        Celica&#039;
        , price: 35000}
                     ,{
                       make: &#039;
                       Ford&#039;
                       , model: &#039;
                       Mondeo&#039;
                       , price: 32000}
                     ,{
                       make: &#039;
                       Porsche&#039;
                       , model: &#039;
                       Boxter&#039;
                       , price: 72000}
                    ];
      var gridOptions = {
        defaultColDef: {
          resizable: true }
        ,columnDefs: columnDefs,rowData: rowData};
      var gridDiv = document.getElementById(&#039;l6r4s71nr5&#039;);
      new agGrid.Grid(gridDiv, gridOptions);
    }
     .bind(items[i]))();
  }
</script>

editor.setComponents(HTML String);  changing  ' to  &#039; like all the symbols like < or >are changin to browser undestanding way kindly help me out to resolve this