How do you update an existing Bootstrap modal data-target?

Let's look in the jQuery documetation what .data() is:

.data()

Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

.data( key, value )

Description: Store arbitrary data associated with the matched elements.

• key

  Type: String

  A string naming the piece of data to set.

• value

  Type: Object

  The new data value; it can be any Javascript type including Array or Object.

---

Using $('#testButton').data('target','#testModal2') you will not modify the data-target attribute but you will store the string "#testModal2" in "target" field. Then $('#testButton').data('target') will return "#testModal2".

It's true that .data('key') can be used to return the data-key attribute value. But you cannot set it using .data('key', 'newValue').

To set an attribute value the most common and easy way is to use .attr() method.

So, the answer is easy: change data in attr and use data-target instead of target:

$('#testButton').attr('data-target','#testModal2');

JSFIDDLE