title: Apply JQuery resize function to all different DIV-IDs in my container
body: <p>I have a container in a HTML file. In this container are several DIVs with different sizes. I want to resize these DIVs when I resize my browser window. I currently have this function in my HTML, which apply to the DIV with the classname &quot;draggable&quot;. It works obviously for all DIVs, but take one width. I want this function applies to the different DIV-IDs, so the width for each DIV is calculated accordingly to its DIV-width.</p>
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
  
      var originaContainerWidth = $('.visible-container').width();
      console.log(&quot;original container width&quot;);
      console.log(originaContainerWidth);
      var cardWidth = $('.draggable').width();
  
      $(window).resize(function(){
          var resizedContainerWidth = $('.visible-container').width();
          console.log(&quot;resized container width&quot;);
          console.log(resizedContainerWidth);
          var percentageResized = resizedContainerWidth / originaContainerWidth
          console.log(&quot;percentage width&quot;);
          console.log(percentageResized);
          console.log(&quot;cardWidth&quot;);
          console.log(cardWidth);
          var resizedCardWidth = (cardWidth * percentageResized);
          console.log(&quot;resizedCardWidth&quot;);
          console.log(resizedCardWidth);
          $('.draggable').css(&quot;width&quot;, resizedCardWidth + &quot;px&quot;);
  
          originaContainerWidth = resizedContainerWidth
          cardWidth = resizedCardWidth
  
      });
  });
  &lt;/script&gt;
  </code></pre>
  <p>How can I apply this function to the different DIV-IDs and not to their classname?</p>
  <p>Edit HTML:</p>
  <pre><code>&lt;div class=&quot;inner-container&quot; id=&quot;innerContainer&quot; style=&quot;width: 100%; height: 100%;&quot;&gt;
  
      &lt;div class=&quot;draggable&quot; id=&quot;7&quot; data-x=&quot;7&quot; data-y=&quot;47&quot; style=&quot;width: 362.891px; height: 129.484px; transform: translate(7px, 47px); background-color: rgb(245, 221, 103) !important;&quot;&gt;
  
          &lt;div class=&quot;d-flex justify-content-between card-title&quot;&gt;
              &lt;div style=&quot;width: 20px; height:22px;&quot;&gt;
              &lt;button data-toggle=&quot;modal&quot; id=&quot;cardEdit&quot; data-placement=&quot;left&quot; title=&quot;Edit&quot; class=&quot;edit existingCard&quot; data-card_text=&quot;&quot; data-card_title=&quot;Backlog&quot; data-card_id=&quot;7&quot; data-card_color=&quot;#f5dd67&quot;&gt;&lt;i class=&quot;fas fa-edit&quot; style=&quot;color: #007bff;&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;/div&gt;
  
              &lt;div class=&quot;mx-auto&quot;&gt;
                  &lt;span&gt;Backlog&lt;/span&gt;
              &lt;/div&gt;
  
              &lt;div style=&quot;width: 20px; height:22px;&quot; class=&quot;pr-4&quot;&gt;
                  &lt;form method=&quot;post&quot;&gt;
                      &lt;button name=&quot;deleteCard&quot; class=&quot;edit&quot; type=&quot;submit&quot; value=&quot;7&quot;&gt;&lt;i class=&quot;fas fa-trash-alt&quot; style=&quot;color: #cc0000;&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;text-container&quot;&gt;
                  &lt;textarea class=&quot;textarea-resizing&quot; readonly=&quot;&quot; style=&quot;height:40px;overflow-y:hidden;&quot; id=&quot;text&quot;&gt;&lt;/textarea&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  
      
      &lt;div class=&quot;draggable&quot; id=&quot;8&quot; data-x=&quot;9&quot; data-y=&quot;234&quot; style=&quot;width: 362.891px; height: 158px; transform: translate(9px, 234px); background-color: rgb(245, 221, 103) !important; border: none;&quot;&gt;
  
          &lt;div class=&quot;d-flex justify-content-between card-title&quot;&gt;
              &lt;div style=&quot;width: 20px; height:22px;&quot;&gt;
              &lt;button data-toggle=&quot;modal&quot; id=&quot;cardEdit&quot; data-placement=&quot;left&quot; title=&quot;Edit&quot; class=&quot;edit existingCard&quot; data-card_text=&quot;&quot; data-card_title=&quot;Second Kart&quot; data-card_id=&quot;8&quot; data-card_color=&quot;#f5dd67&quot;&gt;&lt;i class=&quot;fas fa-edit&quot; style=&quot;color: #007bff;&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;/div&gt;
  
              &lt;div class=&quot;mx-auto&quot;&gt;
                  &lt;span&gt;Second Kart&lt;/span&gt;
              &lt;/div&gt;
  
              &lt;div style=&quot;width: 20px; height:22px;&quot; class=&quot;pr-4&quot;&gt;
                  &lt;form method=&quot;post&quot;&gt;
                      &lt;button name=&quot;deleteCard&quot; class=&quot;edit&quot; type=&quot;submit&quot; value=&quot;8&quot;&gt;&lt;i class=&quot;fas fa-trash-alt&quot; style=&quot;color: #cc0000;&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;text-container&quot;&gt;
                  &lt;textarea class=&quot;textarea-resizing&quot; readonly=&quot;&quot; style=&quot;height:40px;overflow-y:hidden;&quot; id=&quot;text&quot;&gt;&lt;/textarea&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  
      
  
  &lt;/div&gt;
  </code></pre>