Beginner need help

Beginner need help

Hi everybody, i'm supposed to do something like "2.jpeg", the app is in Ruby on rails but the question is about my jquery script, the cobweb and the words are already placed, but i'm in trouble to display the little cobweb behind a word when i click on a word, if someone could help me please (i know the sass is pretty ugly and not responsive, but this is just for a project and i don't have time to do this right)

PS : I'm french sorry if my english is not good enough

there is my code here index.html

<% i = 0 %>
<p><%= link_to 'API', indefinitions_path( :format => :json ) %></p>
<h1>La Toile des Indéfinitions</h1>
<script type="text/javascript">
  $( document ).ready(function(){

    $(".indef").click(function(){
      $().toggle();
    })
  });
</script>

<div class="flex">
  <% @indefinitions.each do |indefinition| %>
    <% i = i + 1 %>
    <div class="indef">
      <%= image_tag("toileBlanche.png", class: "img", id: "img#{i}") %>
      <p class="flexP" id="p<%= i %>"><%= indefinition.name %></p>
    </div>
  <% end %>
</div>

and my sass : 

// Place all the styles related to the indefinitions controller here.
// They will automatically be included in application.css.
// You can use Sass here: http://sass-lang.com/
@font-face
  font-family: 'Raleway'
  font-style: normal
  src: asset-url('Raleway-Regular.ttf')

body
  background-color: #081323

h1
  font-family: 'Raleway'
  text-align: center
  color: #fff
  font-size: 60px
  margin-bottom: 30px

.flex
  text-align: center
  border: 1px #081323 solid
  background-image: image-url('toile.png')
  background-repeat: no-repeat
  background-size: 80% 100%
  background-position: center center
  min-height: 1100px
  min-width: 1100px

p.flexP
  position: relative
  z-index: 2
  font-family: 'Raleway'
  color: white
  width: auto
  font-size: 20px

a
  text-decoration: none

p#p1
  margin-left: 45%
  margin-top: 1%
  margin-right: 45%

p#p2
  position: absolute
  margin-top: 7%
  margin-left: 23%

p#p3
  position: absolute
  margin-top: 8%
  margin-left: 45%

p#p4
  position: absolute
  margin-top: 6%
  margin-left: 65%

p#p5
  position: absolute
  margin-top: 15%
  margin-left: 7%

p#p6
  position: absolute
  margin-top: 14%
  margin-left: 31%

p#p7
  position: absolute
  margin-top: 17%
  margin-left: 65%

p#p8
  position: absolute
  margin-top: 15%
  margin-left: 83%

p#p9
  position: absolute
  margin-top: 20%
  margin-left: 45%

p#p10
  position: absolute
  margin-top: 24%
  margin-left: 25%

p#p11
  position: absolute
  margin-top: 43%
  margin-left: 65%

p#p12
  position: absolute
  margin-top: 34%
  margin-left: 45%

p#p13
  position: absolute
  margin-top: 30%
  margin-left: 72%

p#p14
  position: absolute
  margin-top: 43%
  margin-left: 18%

p#p15
  position: absolute
  margin-top: 52%
  margin-left: 7%

p#p16
  position: absolute
  margin-top: 48%
  margin-left: 45%

p#p17
  position: absolute
  margin-top: 53%
  margin-left: 84%

p#p18
  position: absolute
  margin-top: 54%
  margin-left: 33%

p#p19
  position: absolute
  margin-top: 62%
  margin-left: 65%

p#p20
  position: absolute
  margin-top: 71%
  margin-left: 45%