A dropdown box that toggles the textbox
In this case the answer is very straight-forward if you want to keep things in plain ol' jQuery.  Instead of selecting on ids, use classes and rely upon a well structured dom (which you already have):

$(document).ready(function() {
  $("body").css("background-color", "yellow");

  $(".dropdown_with_toggle").on('click', function() {
    var el = $(this);
    $('.menu', el).slideToggle();
    var arrow = $(".arrow", el);
    arrow.toggleClass("right");
    arrow.toggleClass("down");
  });
});


Then adjust your HTML slightly:

&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
  &lt;title&gt;&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;main class="wrapper"&gt;
    &lt;div class="container"&gt;
      &lt;div class="dropdown_with_toggle"&gt;
        &lt;div class="arrow right"&gt;&lt;/div&gt;
        &lt;h3 class="title"&gt;Dropdown 1&lt;/h3&gt;
        &lt;div class="menu"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="dropdown_with_target"&gt;
        &lt;div class="arrow right"&gt;&lt;/div&gt;
        &lt;h3 class="title"&gt;Dropdown 2&lt;/h3&gt;
        &lt;div class="menu"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/main&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;


They key is that the class dropdown_with_toggle is not being used for styling but rather to guide your javascript.  You listen for click events on all elements with that class, and then you take action not by finding elements by id, but by finding children of your main element by class.  That is what the $('.menu', el) syntax does: it finds the selector but only looks for descendants of a given element.  It's effectively just an alternate syntax for the jQuery .find() method, which would work equally well here.

Just because: the next step is to not attach your listeners directly to the elements but instead use deferred listeners on a mutual parent:

$('.container').on( 'click', '.dropdown_with_toggle', function(){ } )

The rest of your code doesn't change, but the advantage this notation has is that if you add or remove elements dynamically, you don't have to re-register any listeners (as long as you are only modifying elements inside your container div, and the container div isn't removed).  I used to use this trick often with dynamic pages that are loaded/reloaded via ajax.