Multiple Divs with The Same Id Invalid

Multiple divs with the same id invalid?

Yes, it's invalid to have multiple divs with the same id.

Using a class should work fine:

div.details {
    width: 698px;
    background-color: #FFC;
}

If those rules really get overridden, you probably have another rule in place that has higher specificity. In that case, you would have to show us more of your HTML.

What error will i get if i use the same ID for multiple HTML elements?

It would be invalid HTML.

In some environments, it may produce a console warning that multiple IDs in a single document is invalid. Harmless, but annoying.

It will prevent document.getElementById from working properly for those elements, because getElementById selects by ID, but there should only be one element with a given ID in the document. Similarly, it may prevent querySelector and querySelectorAll with ID selectors from working properly.

Using the same ID multiple times may well not break your application in most cases, but just because it might be doable in some circumstances doesn't mean it's a good idea. There's no reason to do it, so don't.

Can multiple different HTML elements have the same ID if they're different elements?

No.

Element IDs should be unique within the entire document.

Multiple divs with the same name withs forms

<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div class="Offers">
    <div class="txt">
    </div>
    <div class="map">
    <form id="vmap" method="post">
        <input type=hidden id=idship value=64>
        <input type=hidden id=iddate value=1254>
        <button>View Map</button>
    </form>
    </div>
</div>
<div class="Offers">
    <div class="txt">
    </div>
    <div class="map">
        <form id="vmap" method="post">
            <input type=hidden id=idship value=65>
            <input type=hidden id=iddate value=1255>
            <button>View Map</button>
        </form>
    </div>
</div>
<div class="Offers">
    <div class="txt">
    </div>
    <div class="map">
        <form id="vmap" method="post">
            <input type=hidden id=idship value=66>
            <input type=hidden id=iddate value=1256>
            <button>View Map</button>
        </form>
    </div>
</div><script src="https://code.jquery.com/jquery-2.2.4.js"  type="text/javascript"></script> 

<script>
$(function () {

$(".Offers .map button").on('click', function() {
    var form=$(this).parent("form");
    var idship =form.find('#idship').val();
    var iddate =form.find('#iddate').val();
    alert(idship +"---------"+iddate);
  });

});
</script>
</body>
</html>

Javascript - Passing value to function from multiple divs with same id

One single approach would be declaring a formal parameter in the changeColor function. You have two alternatives:

Either to pass directly the color value:

function changeColor(newColor) {...}function colors(){    ...    theDiv.innerHTML += "<div value='"+colors[i].hex+"' onclick='changeColor(\""+colors[i].hex+"\")'>...</div><br>";    ...}

How to display div with same ID and OnClick function - Javascript, HTML and CSS

You can use the classes for styling and IDs with indexes to identify the unique div boxes.
Here is the working example

 function replyLink(index) {
      document.getElementById('reply_' + index).style.display = "block";
  }

  // Close div link, displays after opening reply box
  function closeLink(index) {
      document.getElementById('reply_' + index).style.display = "none";
  }

 .comment {
      border: 1px solid #333333;
      width: 500px;
      height: 85px;
      padding: 5px;
      margin: 10px 10px 15px 10px;
  }

  .comment .content {
      border: none;
      padding: 15px;
      font-size: 12px;
  }

  .comment .link {
      border: none;
      padding: 5px;
      margin-top: 5px;
  }

  .comment .link a {
      border: none;
      text-decoration: none;
      font-size: 12px;
      color: blue;
  }

  .comment .link a:hover {
      border: none;
      text-decoration: underline;
      font-size: 12px;
      color: blue;
  }

  .reply {
      border: 1px solid red;
      padding: 15px;
      margin: 0px 0px 10px 45px;
      width: 400px;
  }

    <div class="comment">
        <div class="content">
            Content #1
        </div>
        <div class="link">
            <a href='javascript:void(0);' onclick="replyLink(0)" data-test='1'>Reply</a>
        </div>
    </div>
    <div class="reply" id="reply_0" style="display: none;">
        reply container 1
        <a href='javascript:void(0);' onclick='closeLink(0)'>[Close]</a>
    </div>

    <div class="comment">
        <div class="content">
            Content #2
        </div>
        <div class="link">
            <a href='javascript:void(0);' onclick="replyLink(1)" data-test='2'>Reply</a>
        </div>
    </div>

    <div class="reply" id="reply_1" style="display: none;">
        reply container 2
        <a href='javascript:void(0);' onclick='closeLink(1)'>[Close]</a>
    </div>

Multiple Divs with The Same Id Invalid