Adapt targets component to render on sdg help page

This component was rendered on different pages so there were no conflicts
with static id's.
Now in the SDG help page we are going to render them all at once, so we
convert the static identifiers to dynamic.

app/assets/stylesheets/sdg/goals/targets.scss

@@ -1,4 +1,4 @@
-.sdg-goal-show .targets {
+.sdg-goal-targets {
   dt,
   dd {
     display: inline;

app/components/sdg/goals/targets_component.html.erb

@@ -1,15 +1,15 @@
-<section class="targets">
-  <ul class="tabs" id="target_tabs" data-deep-link="true" data-tabs>
+<section class="sdg-goal-targets">
+  <ul class="tabs" id="goal_<%= goal.code %>_targets" data-deep-link="true" data-tabs>
     <% [global_targets, local_targets].each do |targets| %>
       <li class="tabs-title <%= active(targets) %>">
-        <%= link_to title(targets), "#tab_#{type(targets)}_targets" %>
+        <%= link_to title(targets), "#goal_#{@goal.code}_tab_#{type(targets)}_targets" %>
       </li>
     <% end %>
   </ul>
 
-  <div class="tabs-content" data-tabs-content="target_tabs">
+  <div class="tabs-content" data-tabs-content="goal_<%= goal.code %>_targets">
     <% [global_targets, local_targets].each do |targets| %>
-      <div class="tabs-panel <%= active(targets) %>" id="tab_<%= type(targets) %>_targets">
+      <div class="tabs-panel <%= active(targets) %>" id="goal_<%= goal.code %>_tab_<%= type(targets) %>_targets">
         <% if targets.blank? %>
           <div class="callout primary">
             <%= t("sdg.goals.show.targets.no_local_targets") %>

spec/components/sdg/goals/targets_component_spec.rb

@@ -21,13 +21,13 @@ describe SDG::Goals::TargetsComponent, type: :component do
   it "renders tabs panel" do
     render_inline component
 
-    expect(page).to have_css ".targets"
-    expect(page).to have_css "#target_tabs"
+    expect(page).to have_css ".sdg-goal-targets"
+    expect(page).to have_css "#goal_1_targets"
     expect(page).to have_css "li", count: 2
     expect(page).to have_content "Targets"
     expect(page).to have_content "Local targets"
     expect(page).to have_css ".tabs-content"
-    expect(page).to have_css "#tab_global_targets"
+    expect(page).to have_css "#goal_1_tab_global_targets"
   end
 
   it "renders code and title for each target" do

spec/system/sdg/goals_spec.rb

@@ -122,7 +122,7 @@ describe "SDG Goals", :js do
       create(:sdg_local_target, code: "15.1.1", title: "SDG local target sample text")
       visit sdg_goal_path(15)
 
-      within "#target_tabs" do
+      within ".sdg-goal-targets" do
         expect(page).to have_content "Targets"
         expect(page).to have_content "Local targets"
       end