How to Get the Data-Id Attribute

$(document).ready(function(){       alert($("p").attr('data-id'));
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><p data-id = "100">paragraph </p>

How to get data-id attribute value in Jquery?

You need to pass the current element context in inline click handler like

<button onClick="ShowModal(this)" data-id="217496D-P078"></button>

Then use the passed element reference to get the data-id. You can also use HTMLElement.dataset property like elem.dataset.id

function ShowModal(elem){
    var dataId = $(elem).data("id");
    alert(dataId);
}

Additionally, I would recommend you use jquery to bind event handler's instead of ugly inline click handler.

How can i get custom data attribute

Properties and attributes are two separate things. The data-id attribute you've defined does not automatically correlate to a property on that element. Similarly, e.g. an <input type="text"> can have a value attribute, but the value property on it does not necessarily give you the value of that attribute, as the value property is pointing to what's currently in the input, whereas the value attribute is its initial value. Try to detach these two concepts.

To answer your question, though; there are two ways. One is to use element.getAttribute('data-id'). This works for any attribute. However, data-* attributes get their own fancy way to read and write their values; the dataset property. For example, to access the data-id property, you can use element.dataset.id. Similarly, to access the data-foo-bar attribute, you can use element.dataset.fooBar.

TLDR: Use element.dataset.id or element.getAttribute('data-id')

get value based on id and data attribute jquery

Firstly you should avoid using "name" as id for any element because name is an attribute that is used for various HTML input elements which may cause issues as inputs inside a form can be addressed using their name attribute, hence I used 'nm' instead of 'name'.

And if I understood correctly, this is how you can get the desired value:

$(document).on('click', '.update_record', function() {
   let btnId= $(this).attr("id");

   // get the element via css selector using jquery and store its value
   let name = $(`input#nm[data-belongsto=${btnId}]`).val();
});

Get data id attribute value of an specific image element from list of image element using jquery?

The main issue is because your loop is generating HTML elements with the same id attribute repeated multiple times. This is invalid as the value of id attributes must be unique within the DOM.

To fix the issue remove the id and use class attributes instead. You can then traverse the DOM from the reference to the button which raises the click event to find the related .singleimage element and read its data-id.

Also note that I made a couple of tweaks to the logic to meet best practices, such as using data() instead of attr() when working with data attributes, and also placing the CSS rules in an external stylesheet instead of inline style attributes.

With all that said, try this:

$(document).on("click", ".imagePosition", function() {
  var id = $(this).next('.singleimage').data('id');
  console.log(id);

  // AJAX request here...
});

.row>div {
  position: relative;
}

.singleimage {
  width: 300px;
  height: 300px;
  margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="images">Product Images :</label>
<div class="row">
  <div>
    <button type="submit" class="close imagePosition">
      <span>×</span>
    </button>
    <img alt="preview image" class="singleimage" src="{{asset('storage/'.$image->image)}}" alt="image" data-id="001" />
  </div>
  
  <div>
    <button type="submit" class="close imagePosition">
        <span>×</span>
      </button>
    <img alt="preview image" class="singleimage" src="{{asset('storage/'.$image->image)}}" alt="image" data-id="002" />
  </div>
  
  <div>
    <button type="submit" class="close imagePosition">
      <span>×</span>
    </button>
    <img alt="preview image" class="singleimage" src="{{asset('storage/'.$image->image)}}" alt="image" data-id="003" />
  </div>
</div>

this.$el.find(".departmentName").data("id");