Q:

How to change my target  with another one through either CSS or jQuery

I have a page that can display hundreds of rows of data.  Each individual row of data can have anywhere from 1 to 9 options.  Clicking any 1 "option" will slide down a div and displays 2 possible actions for that row/option.  I am planning on putting AJAX functions for those actions.
Now, just for testing, I have a visible div call .here, in yellow, that I would like to be hidden. When the option is clicked, the .here open with my actions instead of the <div> that it currently opens.  It opens right under the options and that looks awful.  I know that is how my HTML/CSS is structured, but I don't know of any other way.  Any solution, whether HTML/CSS or jQuery would greatly be appreciated.

$(document).ready(function() {

  $(".dropdown-link").click(function(e) {
    e.preventDefault();

    var $div = $(this).next('.dropdown-container');

    $(".dropdown-container").not($div).slideUp("slow");
    if ($div.is(":visible")) {
      $div.slideToggle("slow");
    } else {
      $div.slideDown("slow");
    }
  });

  $(document).click(function(e) {
    var p = $(e.target).closest('.dropdown').length

    if (!p) {
      $(".dropdown-container").hide();
    }
  });

});
.bind_Area {
  margin: 5px;
  padding: 7px 5px;
  text-align: left;
  font-weight: 700;
  font-size: 0.875em;
  border-radius: 4px;
  border: 1px solid #666666;
  background-color: #2E2E2E;
}

.bind_Name {
  display: flex;
}

.dropdown {
  display: block;
  padding: 2px 5px;
  border: 1px solid red;
  flex-flow: column wrap;
}

.dropdown-link {
  display: inline-flex;
  margin: 0px 5px;
  cursor: pointer;
  padding: 3px 10px;
  text-decoration: none;
  border-radius: 4px;
  background: repeat-x center center #000000;
  box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  color: #CCFF66;
}

.dropdown-container {
  margin-top: 5px;
  margin-left: 0px;
  display: none;
  background-color: gray;
}

.here {
  xdisplay: none;
  margin-top: 5px;
  height: 25px;
  border: 1px solid blue;
  background-color: yellow;
  width: 85%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div lass="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <div class="dropdown-link" href="#">OPTION 00</div>
      <div class="dropdown-container">
        <div>
          <div>Proceed</div>
          <br>
          <div>Cancel</div>
        </div>
      </div>
    </div>
    <br>
    <div class="dropdown">
      <div class="dropdown-link" href="#">OPTION 01</div>
      <div class="dropdown-container">
        <div>
          <div>Proceed</div>
          <br>
          <div>Cancel</div>
        </div>
      </div>
    </div>
    <br>
    <div class="dropdown">
      <div class="dropdown-link" href="#">OPTION 02</div>
      <div class="dropdown-container">
        <div>
          <div>Proceed</div>
          <br>
          <div>Cancel</div>
        </div>
      </div>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here">
  </div>
</div>
<!-- end of #bind_Area -->
<br>
<br>
<div lass="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <div class="dropdown-link" href="#">OPTION 00</div>
      <div class="dropdown-container" style="display: none;">
        <div>
          <div>Proceed</div>
          <br>
          <div>Cancel</div>
        </div>
      </div>
    </div>
    <br>
    <div class="dropdown">
      <div class="dropdown-link" href="#">OPTION 01</div>
      <div class="dropdown-container">
        <div>
          <div>Proceed</div>
          <br>
          <div>Cancel</div>
        </div>
      </div>
    </div>
    <br>
    <div class="dropdown">
      <div class="dropdown-link" href="#">OPTION 02</div>
      <div class="dropdown-container">
        <div>
          <div>Proceed</div>
          <br>
          <div>Cancel</div>
        </div>
      </div>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here">
  </div>
</div>
<!-- end of #bind_Area -->

View on CodePen

A:

I recommend using jQuery's closest() to find the closest .bind_Area ancestor, and then finding the .here element within that ancestor element. I also suggest using data attributes to identify which option is active for a particular option area.
Here's a demonstration:

$(function() {

  var $allHeres = $('.here');

  $(".dropdown-link").click(function(e) {
    e.preventDefault();

    var $this = $(this);
    var $thisHere = $this.closest('.bind_Area').find('.here');
    var thisOption = $this.data('option');

    // close all that are not this one
    $allHeres.not($thisHere).slideUp("slow");

    // if this option area isnt set to this option...
    if ($thisHere.data('option') != thisOption) {

      // show this option area
      $thisHere.slideDown('slow');

      // set option area to current option
      $thisHere.data('option', thisOption);
      $thisHere.text(thisOption);

    } else {

      // toggle this option area
      $thisHere.slideToggle('slow');

    }

  });

});
.bind_Area {
  margin: 5px;
  padding: 7px 5px;
  text-align: left;
  font-weight: 700;
  font-size: 0.875em;
  border-radius: 4px;
  border: 1px solid #666666;
  background-color: #2E2E2E;
}

.bind_Name {
  display: flex;
}

.dropdown {
  display: block;
  padding: 2px 5px;
  border: 1px solid red;
  flex-flow: column wrap;
}

.dropdown-link {
  display: inline-flex;
  margin: 0px 5px;
  cursor: pointer;
  padding: 3px 10px;
  text-decoration: none;
  border-radius: 4px;
  background: repeat-x center center #000000;
  box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  color: #CCFF66;
}

.dropdown-container {
  margin-top: 5px;
  margin-left: 0px;
  display: none;
  background-color: gray;
}

.here {
  display: none;
  margin-top: 5px;
  height: 25px;
  border: 1px solid blue;
  background-color: yellow;
  width: 85%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="0">OPTION 00</div>
    </div>
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="1">OPTION 01</div>
    </div>
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="2">OPTION 02</div>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here"></div>
</div>
<!-- end of #bind_Area -->
<div class="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="0">OPTION 00</div>
    </div>
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="1">OPTION 01</div>
    </div>
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="2">OPTION 02</div>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here"></div>
</div>
<!-- end of #bind_Area -->

Depending on the behavior you want in the options area, you may need to change its HTML and/or the events bound to its contents when you click various options.
Also, there seems to be a typo in your code:
<div lass="bind_Area">

should be:
<div class="bind_Area">

Edit
Here's a version that slides up and back down when choosing a different option.
I'm also made it highlight the selected option, just for kicks.

$(function() {

  var speed = 'fast';
  var $allHeres = $('.here');
  var $dropLinks = $('.dropdown-link');

  $dropLinks.click(function(e) {
    e.preventDefault();

    var $this = $(this);
    var $thisHere = $this.closest('.bind_Area').find('.here');
    var thisOption = $this.data('option');

    // deselect links
    $dropLinks.removeClass('selected');

    // close all option areas
    $allHeres.slideUp(speed);

    // if this option area isnt set to this option...
    if ($thisHere.data('option') != thisOption) {

      // select this link
      $this.addClass('selected');

      // set option area to the current option
      $thisHere.data('option', thisOption);

      // slide option area up
      $thisHere.stop(true, false).slideUp(speed, function() {
        // set option area text and slide it down
        $thisHere.text(thisOption);
        $thisHere.slideDown(speed);
      });

    } else {

      // toggle this option and its area
      $this.toggleClass('selected', $thisHere.is(':hidden'));
      $thisHere.stop(true, false).slideToggle(speed);

    }

  });

});
.bind_Area {
  margin: 5px;
  padding: 7px 5px;
  text-align: left;
  font-weight: 700;
  font-size: 0.875em;
  border-radius: 4px;
  border: 1px solid #666666;
  background-color: #2E2E2E;
}

.bind_Name {
  display: flex;
}

.dropdown {
  display: block;
  padding: 2px 5px;
  border: 1px solid red;
  flex-flow: column wrap;
}

.dropdown-link {
  display: inline-flex;
  margin: 0px 5px;
  cursor: pointer;
  padding: 3px 10px;
  text-decoration: none;
  border-radius: 4px;
  background: repeat-x center center #000000;
  box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  color: #CCFF66;
}

.dropdown-link.selected {
  background-color: #555;
  color: white;
}

.dropdown-container {
  margin-top: 5px;
  margin-left: 0px;
  display: none;
  background-color: gray;
}

.here {
  display: none;
  margin-top: 5px;
  height: 25px;
  border: 1px solid blue;
  background-color: yellow;
  width: 85%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="0">OPTION 00</div>
    </div>
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="1">OPTION 01</div>
    </div>
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="2">OPTION 02</div>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here"></div>
</div>
<!-- end of #bind_Area -->
<div class="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="0">OPTION 00</div>
    </div>
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="1">OPTION 01</div>
    </div>
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="2">OPTION 02</div>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here"></div>
</div>
<!-- end of #bind_Area -->

A:

You've already got a perfectly good answer, but I'm going to give you a couple of alternatives and something to think about.
First up lets make this a little more semantic. You effectively have links to another section of the page, so lets use <a> tags with the href set to the page section. This option has no javascript and is perfectly functional, and could be enhanced with some javascript/jquery at your discretion.

.bind_Area {
  margin: 5px;
  padding: 7px 5px;
  text-align: left;
  font-weight: 700;
  font-size: 0.875em;
  border-radius: 4px;
  border: 1px solid #666666;
  background-color: #2E2E2E;
}

.bind_Name {
  display: flex;
}

.dropdown {
  display: block;
  padding: 2px 5px;
  border: 1px solid red;
  flex-flow: column wrap;
}

.dropdown-link {
  display: inline-flex;
  margin: 0px 5px;
  cursor: pointer;
  padding: 3px 10px;
  text-decoration: none;
  border-radius: 4px;
  background: repeat-x center center #000000;
  box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  color: #CCFF66;
}


.dropdown-container {
  margin-top: 5px;
  margin-left: 0px;
  background-color: gray;
  display: none;
  overflow: hidden;
  margin: 5px;
}

.dropdown-container:target {
  max-height: 1000px;
  display: block;
}

.here {
  position: relative;
  /*Children will be postioned relative to this */
  margin-top: 5px;
  border: 1px solid blue;
  background-color: yellow;
  width: 85%;
  min-height: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div lass="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <a class="dropdown-link" href="#option00">OPTION 00</a>
    </div>
    <div class="dropdown">
      <a class="dropdown-link" href="#option01">OPTION 01</a>
    </div>
    <div class="dropdown">
      <a class="dropdown-link" href="#option02">OPTION 02</a>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here">
    <div class="dropdown-container" id="option00">
      <fieldset>
        <legend>Option 00</legend>
        <div>Proceed</div>
        <div>Cancel</div>
      </fieldset>
    </div>

    <div class="dropdown-container" id="option01">
      <fieldset>
        <legend>Option 01</legend>
        <div>Proceed</div>
        <div>Cancel</div>
      </fieldset>
    </div>
    <div class="dropdown-container" id="option02">
      <fieldset>
        <legend>Option 02</legend>
        <div>Proceed</div>
        <div>Cancel</div>
      </fieldset>
    </div>
  </div>
</div>
<!-- end of #bind_Area -->
<br>
<br>
<div lass="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <a class="dropdown-link" href="#option10">OPTION 00</a>
    </div>
    <div class="dropdown">
      <a class="dropdown-link" href="#option11">OPTION 01</a>
    </div>
    <div class="dropdown">
      <a class="dropdown-link" href="#option12">OPTION 02</a>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here">
    <div class="dropdown-container" id="option10">
      <fieldset>
        <legend>Option 10</legend>
        <div>Proceed</div>
        <div>Cancel</div>
      </fieldset>
    </div>
    <div class="dropdown-container" id="option11">
      <fieldset>
        <legend>Option 11</legend>
        <div>Proceed</div>
        <div>Cancel</div>
      </fieldset>
    </div>
    <div class="dropdown-container" id="option12">
      <fieldset>
        <legend>Option 12</legend>
        <div>Proceed</div>
        <div>Cancel</div>
      </fieldset>
    </div>
  </div>
</div>
<!-- end of #bind_Area -->

Now let's optimize this a little. In reality, you probably don't need a set of buttons for each option. You just need a way of passing the info to the ajax. I'm going to use a visible form field here so you can see it, but your could just as easily use a hidden field, or a data attribute that you AJAX call looks at. So in this version each "row" will have a set of action 

$(document).ready(function(){
  $(".dropdown-link").on("click", function(){
    const tranSpeed = "slow";
    //OPTIONAL - hide all dropdown containers
   // $(".dropdown-container").hide(tranSpeed);
    //Get clicked option
    var selOption = $(this).data("selectedoption");    
    //Get next "here"
    var here = $(this).closest(".bind_Name").next(".here");
    
    //Populate stuff
    $(here).find("legend").text(`Option ${selOption}`);
    $(here).find("input[type=text]").val(`Option ${selOption}`);
    //TO DETECT IF DATA HAS CHANGED
    var dataChanged = $(here).data("seloption") !== selOption;
    $(here).data("seloption",selOption);
    //Show the dropdown if data changed 
    var target = $(here).find(".dropdown-container");
    //Cose Other containers
    $(".dropdown-container").not(target).hide(tranSpeed);
    if(dataChanged) {      
      $(target).show(tranSpeed);  
    }else{ //Or toggle it otherwise
      $(target).toggle(tranSpeed);
    }
    
    
  });
});
.bind_Area {
  margin: 5px;
  padding: 7px 5px;
  text-align: left;
  font-weight: 700;
  font-size: 0.875em;
  border-radius: 4px;
  border: 1px solid #666666;
  background-color: #2E2E2E;
}

.bind_Name {
  display: flex;
}

.dropdown {
  display: block;
  padding: 2px 5px;
  border: 1px solid red;
  flex-flow: column wrap;
}

.dropdown-link {
  display: inline-flex;
  margin: 0px 5px;
  cursor: pointer;
  padding: 3px 10px;
  text-decoration: none;
  border-radius: 4px;
  background: repeat-x center center #000000;
  box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  color: #CCFF66;
}

.dropdown-container {
  margin-top: 5px;
  margin-left: 0px;
  background-color: gray;
  display: none;
  overflow: hidden;
  margin: 5px;
}



.here {
  position: relative;
  /*Children will be postioned relative to this */
  margin-top: 5px;
  border: 1px solid blue;
  background-color: yellow;
  width: 85%;
  min-height: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div lass="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <button class="dropdown-link" data-selectedoption="00">OPTION 00</button>
    </div>
    <div class="dropdown">
      <button class="dropdown-link" data-selectedoption="01">OPTION 01</button>
    </div>
    <div class="dropdown">
      <button class="dropdown-link" data-selectedoption="02">OPTION 02</button>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here">
    <div class="dropdown-container">
      <fieldset>
        <legend></legend>
        <div>Proceed</div>
        <div>Cancel</div>
        <input type="text">
      </fieldset>
    </div>
  </div>
</div>
<!-- end of #bind_Area -->
<br>
<br>
<div lass="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <button class="dropdown-link" data-selectedoption="10">OPTION 00</button>
    </div>
    <div class="dropdown">
      <button class="dropdown-link" data-selectedoption="11">OPTION 01</button>
    </div>
    <div class="dropdown">
      <button class="dropdown-link" data-selectedoption="12">OPTION 02</button>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here">
    <div class="dropdown-container">
      <fieldset>
        <legend></legend>
        <div>Proceed</div>
        <div>Cancel</div>
        <input type="text">
      </fieldset>
    </div>
  </div>
</div>
<!-- end of #bind_Area -->

