anchor.diff:    <a class='steps' data-id='<%=@recipe.id%>' href='https://www.w3schools.com'>Steps</a>
     (<%= @recipe.recipe_steps.length %>)
   </p>
  +</div>
   
   <script type='text/javascript' charset='utf-8'>
   $(function () {
  
positive.code:             units[relation['id']] = relation.attributes['name'];
            }
          });
          var recipe_ingredients = '<table>';
          data.data.forEach(function(recipe_ingredient) {
            recipe_ingredients += '<tr>' +
                                    '<td>' + ingredients[recipe_ingredient.relationships.ingredient.data['id']] + '</td>' +
                                    '<td>' + recipe_ingredient.attributes['quantity'] + '</td>' +
                                    '<td>' + units[recipe_ingredient.attributes['unit-id']]  + '</td>' +
                                  '</tr>';
          });
          recipe_ingredients += '</table>';
          $('#ingredients').html(recipe_ingredients);
        });
        $(this).attr('show-detail', 0);
  
negative.code: <div class="col-sm-12">
  <h1>
    <%= @recipe.name %> <%= link_to image_tag('edit-icon.png', size:'16', title: 'Edit recipe'), edit_recipe_path(@recipe) if @recipe.author == current_user %>
    <%= link_to image_tag('delete-icon.png', size:'16', title: 'Delete recipe'), recipe_path(@recipe), method: :delete, data: {confirm: 'Are you sure!'} if policy(@recipe).destroy? %>
  